react_누구든지 하는 리액트(3)

작성일

3편 : JSX

리액트 컴포넌트 파일 파헤치기

hello-react/src/App.js에 들어가면

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

위와 같은 코드를 만날 수 있다.

상단의 코드 import React 리액트 모듈이 있는데 그걸 불러와서 사용하겠다는 의미이며, 리액트를 사용할 때는 꼭 불러와줘야 한다. import를 한다는 것은, webpack을 사용하기에 가능한 작업이다. 불러오고 나서 나중에 빌드를 하게 되면 웹팩에서 파일의 학장자에 따라 다른 작업을 하게 된다. 예를 들어 css 파일을 불러오게 되면, 나중에 프로젝트에서 사용한 프로젝트 파일을 모두 결합해주는 작업을 진행하고, 자바스크립트 파일을 불러오게 되면 모든 코드들이 제대로 로딩되게, 순서를 설정해주어 하나로 합쳐준다.

아래에 보면 class라는 문법이 있다. 컴포넌트를 만드는 방법은 2가지가 있다. 그 중 하나는 클래스를 통해서 위와 같이 만들며, 다른 하나는 함수를 통하여 컴포넌트를 만드는 것이다. 클래스 형태로 만들어진 컴포넡트에는 꼭 render함수가 있어야 한다. 그리고 그 내부세엇는 JSX를 return 해주어야 한다. 위에 보이는 HTML 같은 코드가 바로 JSX 코드이다.

마지막 줄에 있는 export default app이 코드는 우리가 작성한 컴포넌트를 다른 곳에서 불러와서 사용할 수 있도록 내보내기를 해준다.

index.js

index.js 파일에 들어가보면 아래와 같은 코드가 보인다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

우리가 만든 컴포넌트를 불러올 때, 이렇게 import App from './App'; import를 사용해서 불러와준다. 그리고 브라우저 상에는 우리의 리액트 컴포넌트를 보여주기 위해서 ReactDom.reader 함수를 사용한다. 첫 번째 파라미터는 렌더링할 결과물을 말하며, 두 번째 파라미터는 컴포넌트를 어떤 dom에 그릴지 정해준다.

JSX

JSX는 Javascript.xml의 약자다. 기존 자바스크립트의 확장 문법. 자바스크립트 내부에 마크업 코드를 작성할 수 있도록 하는 기능을 제공한다.

HTML과 비슷하지만 1.모든 태그는 꼭 닫아줘야하며

  1. 두개 이상의 엘리먼트는 하나의 엘리먼트로 감싸줘야 한다.

HTML과 비슷한 문법으로 작성을 하면 이를 React.createElement를 사용하는 자바스크립트 형태로 변환시켜준다.

fragments를 사용하면 dom에 별도 노드를 추가하지 않고 자식 목록을 그룹화할 수 있다.

ES6에서는 var을 쓸일이 없고, 값을 선언 후 바꿔야 할 땐 let을, 그리고 바꾸지 않을 때에는 const를 사용한다.

리액트에서는 스타일을 작성할 때도 객체 형태로 작성해준다. 주석은 태그 사이에 넣던가, {/* ... */} 이렇게 할 수 있다.

참고자료

누구든지 하는 리액트

누구든지 하는 리액트 블로그 3편 : JSX

0%