React(8) Component파일 분리하기

Component를 파일로 분리해보자. 

큰 규모의 프로젝트일 때 수백개의 Component 관리를 쉽게 할 수 있기 때문이다.

 

1. src에 컴포넌츠를 담을 components 폴더 만들기 & 그안에 각 컴포넌츠 이름으로 js파일 만들기 

디렉토리

 

2. 컴포넌츠 클래스들을 각 파일에 담기 

components 폴더의 하위 파일로 만들어 클래스 자체를 넣어놓는다.

- 맨위에 선언 → import React, {Component} from 'react'; 

- 맨아래에 선언 → export default Subject; (Subject 클래스를 외부에서 가져다 쓸 수 있도록 선언해준다.)

Subject.js

Main.js

Content.js

 

3. 상위 컴포넌츠에 import해서 맘껏 사용하기

상위 컴포넌츠인 App.js에서는 import Subject from "./components/Subject.js"; 선언후 사용한다.

 

실행화면