[React] 컴포넌트 파일로 분리하기

큰 프로젝트 개발할때 소스코드의 길이가 많이 길어지고 하나의 파일의 용량이 커지기 마련입니다.

이를 방지하고자 각각의 기능들을 하는 컴포넌트들을 각각의 파일로 분리하여 활용하여 유지보수성 가독성이 좋은 효과를 가져올 수 있습니다.

TOC의 컴포넌트를 그대로 TOC.js 파일을 생성하여 입력하고

import React, {Component} from "react";

상단에 import~ 를 넣어줘야 한다.

react라는 라이브러리에서 component라는 클래스를 로딩한다는 뜻이다.

 

또한 App.js에도

import TOC from "./components/TOC"

상단에 import~를 넣어줘야 한다.

TOC는 components의 TOC에서 가져온다는 뜻이다.

 

App.js

TOC.js