---
description: App.js 파일의 App 컴포넌트 구조를 참고해 새로운 컴포넌트를 만들고, 파일로 분리해 관리한다.
---

# \[React] 2. 컴포넌트(Component) 생성 및 파일별로 분리하기

## 1. App 컴포넌트 참고하기

```markup
<html>
  <body>
    <header>
      <h1>WEB</h1>
      world wide web!
    </header>        
    <article>
      <h2>HTML</h2>
      HTML is HyperText Markup Language.
    </article>
  </body>
</html>
```

위 html 파일의 각 시멘트태그를 **리액트 컴포넌트**로 바꿔보고 싶다면,

자동 생성되는 App.js 파일의 **`App` 컴포넌트의 구조를 참고해** 새로운 컴포넌트를 만들 수 있다. 예를 들어 `Header` 컴포넌트는 아래의 코드로 생성할 수 있다.

```javascript
class Header extends Component {
  render(){
    return (
      <header>
      <h1>WEB</h1>
      world wide web!
      </header>
    );
  }
}
```

## 2. 컴포넌트 생성 원칙

컴포넌트를 만들때 몇가지 원칙이 있다면,

* 클래스 이름은 항상 **대문자**로 시작한다.
* 각 컴포넌트는 **오직 하나의 최상위 태그**로만 구성된다.&#x20;

그럼 이제 `App` 컴포넌트를 아래처럼 수정해 `Header` 컴포넌트를 화면에 띄울 수 있다.

```javascript
class App extends Component {
  render() {
    return (
          <div className="App">
        <Header></Header>
      </div>
    );
  }
}
```

몇 줄의 html 파일이 `<Header></Header>` 이렇게 줄어들었다. 웹 브라우저에게는 html 코드로 인식할 수 있게끔 리액트가 알아서 변환해서 전달한다. \


## 3. 컴포넌트 파일로 분리하기

App.js에는 App 컴포넌트 하나만 두는것이 좋기 때문에, 다른 컴포넌트들을 파일로 분리하는 작업이 필요하다.

### 3.1. components 폴더 생성하기

`src` 폴더에 `components`폴더를 만들고, 컴포넌트별로 자바스크립트 파일(ex. `Subjects.js`)을 만들어 분리한다.

#### components / Subject.js

```javascript
import React, {Component} from 'react';

class Subject extends Component {
    render(){
        return (
            <header>
                <h1>{this.props.title}</h1>
                {this.props.sub}
            </header>
        );
    }
}

export default Subject;
```

### 3.2. import, export 하기

파일로 분리한 컴포넌트를 사용하기 위해서 우선 `{component}`라는 객체를 리액트 앱으로부터 `import` 해와야 한다. 상단에 코드를 추가해주자.

```javascript
//Subject.js
import React, {Component} from 'react';
```

그리고 새로 생성한 `Subject` 컴포넌트를 `App` 컴포넌트에서 사용하기 위해, `Subject.js`에서는 `export`를, `App.js`에서는 `import`를 넣어준다.

```javascript
//Subject.js
export default Subject;
```

```javascript
//App.js
import Subject from './components/Subject'
```

* `export`는 파일 하단에, `import`는 파일 상단에!

## 4. 참고

* [React 공식문서](https://ko.reactjs.org/tutorial/tutorial.html)
* [생활코딩 React](https://opentutorials.org/module/4058)
* [React - 14. Component 파일로 분리하기](https://www.youtube.com/watch?v=8hGqznPGVc0\&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi\&index=15)
