[생활코딩/React] 14. Component 파일로 분리하기

참고자료: 유튜브 생활코딩 React https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

 

1.  Component 파일로 분리하기

---

👉🏻src에 'component' 디렉토리를 만들어 각 컴포넌트 이름별로 파일을 만들어준다.

//src/component/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;

👉🏻Subject 컴포넌트의 내용을 담아준다. 맨 위의 줄은 react의 컴포넌트를 사용하기 위해 필수적으로 넣어줘야 하는 코드이다.

//App.js
import Subject from "./component/Subject"

👉🏻App.js 파일에서 Subject를 import해오고 이전에 있던 Subject 코드는 지워준다. (코드가 간결해짐!)

👉🏻모든 컴포넌트를 똑같이 반복해보자!

👉🏻컴포넌트를 3개의 파일로 나눴고 App.js의 코드가 아주 간결해졌다.

👉🏻결과는 이전과 동일하게 나온다!