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

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

1. App 컴포넌트 참고하기

<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 컴포넌트는 아래의 코드로 생성할 수 있다.

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

2. 컴포넌트 생성 원칙

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

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

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

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

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 해와야 한다. 상단에 코드를 추가해주자.

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

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

//Subject.js
export default Subject;

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

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

4. 참고

PreviousReact Next[React] 1. 파일 구조 이해하기

Last updated 3 years ago

Was this helpful?