# \[React] 1. 파일 구조 이해하기

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

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

## 1. `index.js`

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

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

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

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

## 2. `App.js`

```javascript
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`해서 사용할수 있다.&#x20;
* `default`는 이 파일에서 기본적으로 `App` 컴포넌트 **하나만** `export`한다는 의미다.

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

## 3. 참고

* [벨로퍼트와 함께하는 모던 리액트](https://hidaehyunlee.gitbook.io/fork-my-brain/web/react/react-1.)
* [React 공식문서](https://ko.reactjs.org/tutorial/tutorial.html)
* [생활코딩 React](https://opentutorials.org/module/4058)