[React] 파일 구조 이해하기

새로운 react 앱을 생성하면 여러 폴더와 파일들이 생기는데, 그중 핵심이 되는 파일은 다음 3가지이다.

• src/ App.js
• src/ index.js
• public/ index.html

1. index.js

이 파일에서 가장 중요한 내용은 아래 코드다.

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

ReactDom이 App컴포넌트를 document에서 id값이 root인 태그안에 랜더링 해준다는 의미다. id값이 root 인 태그는 index.html에 있다. 즉, 화면에 보여질 템플릿 설정과 관련된 중요한 코드인 것이다.

예를 들어 위 코드에서 App컴포넌트 대신 hello world 같은 문자를 넣으면 root안에 렌더링 되어서 화면에 출력된다.

2. App.js

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

class App extends Component {
  render() {
    return (
      <div className="App">
        //화면에 출력될 내용
      </div>
    );
  }
}

export default App;

App 컴포넌트는 App.js 파일에 선언되어있다. 리액트의 모든 클래스형 컴포넌트는 App 컴포넌트의 구조와 똑같이 만들면 되니까 구조를 잘 익혀두자.

마지막의 export default App; 이 내용은 작성한 컴포넌트를 내보내는 코드이다.

• export로 내보낸 컴포넌트는 다른 파일에서 import해서 사용할수 있다.
• default는 이 파일에서 기본적으로 App 컴포넌트 하나만 export한다는 의미다.

다음 글에서 컴포넌트를 어떻게 생성하고 사용하는지 알아보자.

3. 참고

• 벨로퍼트와 함께하는 모던 리액트
• React 공식문서
• 생활코딩 React