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

컴포넌트별로 별도의 파일로 정리정돈해서 쪼개보기

먼저 src 디렉터리에 components 라는 디렉터리를 만든다.

 

생성된 components 디렉터리 안에 컴포넌트별로 정리해보겠다.

우선 TOC 컴포넌트부터 작업한다.

<index.js>

P.70 첫번재 코드 참조!!

...생략...
import App from './App'
...생략...

위 코드를 보면  C.R.A가 기본적으로 이 App이라는 컴포넌트를 같은 디렉터리에 있는 App.js 라는 파일에서 불러와 보여주는 것을 알 수 있다.

 

이를 참고해 components 디렉터리로 가서 TOC.js 라는 파일을 생성하고 기존의 App.js 에 있던 TOC 컴포넌트를 복사해 붙여넣는다.

 + 편집기 기능에 따라 'Component 라는 클래스가 사용되고 있는데 그 클래스를 로딩하는 코드가 없다.'

    라는 내용의 경고 메시지를 보여줄 수 있다.

 

그 다음으로 Component라는 클래스를 TOC.js에서 사용하기 위해 App.js 의 맨 위에 있던 코드 또한 복사 붙여넣기한다.

 

import React, { Component } from 'react'; 부분은 react 라는 라이브러리에서 Component 라는 클래스를 로딩한 것이다.

앞의 'import React' 부분은 리액트로 코딩할 때 필수적으로 필요한 것!

 

맨 아래의 'export default TOC'는 TOC.js에 여러가지 변수나 함수가 존재할 수 있는데,

이것들을 외부에서 사용할 수 있게 허용할 것인지를 코드로 표현한것.

이렇게 작성하면 이 스크립트 파일을 가져다 쓰는 쪽에서 TOC 클래스를 가져다 사용할 수 있다.

 

APP.js 에 있는 TO를 방금 작성한 TOC.js에 있는 컴포넌트를 불러오도록 수정하기

<App.js>

P.71 예제 14-2 참조!!

... 생략 ...
import TOC from './components/TOC';
... 생략 ...

TOC class 코드 지우기

 

이렇게 하면 결과는 똑같지만 코드는 보기 좋아졌다.

나머지 Content , Subject 컴포넌트도 똑같이 해준다.

 

App.js 코드가 간결해지고 코드가 간단해서 필요한 컴포넌트를 빠르게 찾을 수 있다.

또, 다른 리액트 파일에서도 이 components 디렉터리 안의 컴포넌트들을 사용해 빠르게 애플리케이션을 작성할 수 있다.

 

이처럼 컴포넌트를 파일로 쪼개는 방법을 알았다.