[React] JSX

프로젝트 구성

---

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

react-app 프로젝트 구성은 위의 그림과 같습니다.

 

 

index.html

---

id가 root인 태그 안에 UI 컴포넌트를 정의하게 된다.

꼭 id가 root여야하는건 아니며, 진입 파일에서 id는 변경 가능하다.

 

 

 

App.js

---

UI 컴포넌트에 해당하는 코드가 작성된 파일

 

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와 그 내부의 Component를 불러옵니다.

React를 import 해주는 이유 중에 하나는 JSX를 사용하기 위함입니다.

 

import를 통해 프로젝트를 빌드할 경우 Webpack에서 파일의 확장자에 따라 다른 작업이 이루어지게 됩니다.

 

class가 App인 태그 안에 코드를 작성하면 화면이 자동으로 reload되면서 작성한 내용이 반영되며,

반드시 react는 하나의 최상위 태그 안쪽에 나머지 태그들이 정의되어야 함을 의미함을 알 수 있습니다.

 

 

 

컴포넌트 생성 방법

---

컴포넌트를 생성하는 방법에는 클래스를 통해서 만드는 방법과 함수를 통해서 만드는 방법, 두 가지가 존재합니다.

위의 샘플코드는 클래스 형태로 만들어진 컴포넌트 방식입니다.

클래스 형태로 만들어지는 컴포넌트에는 반드시 render 함수가 포함되어야 하며, JSX를 return 해주어야 합니다.

 

 

 

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: https://bit.ly/CRA-PWA
serviceWorker.unregister();

 

컴포넌트를 불러올 때는 import를 사용해 불러오며, 브라우저 상에 있는 React 컴포넌트를 보여주기 위해서 ReactDom.render 함수를 사용합니다.

 

 

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

첫번째 파라미터는 렌더링 할 결과물이며, 두번째 파라미터는 컴포넌트를 어떤 DOM에 보여지게 할 지를 정의합니다.

 

<App /> : react를 통해 만든 사용자 정의 태그 = 컴포넌트 (컴포넌트의 실제 구현은 import된 App.js에 있다.)

document.getElementById('root') : id가 root인 dom에 보여지게 하며, 해당 DOM은 public/index.html 파일에 찾아볼 수 있음