Component를 파일로 분리하기

이전에 컴포넌트들을 App.js에 모두 집어너었다.

이런 방식이면 다른곳에서 필요할 때 사용하기 어렵기 때문에 컴포넌트를 따로 파일로 분류시키고자 한다.

App.js에 있던 class를 파일화 시켜주기 위해 새로운 TOC.js라는 파일을 생성한다.

이 뒤에 TOC.js에 컴포넌트를 사용하기 위한 class 를 import 해주어야 한다.

import React, {Component} from 'react';

가져올 컴포넌트 클래스를 복사한 후 마지막엔 외부에서도 사용 가능하게 하기 위한 코드를 삽입한다.

  export default TOC;

분리한  TOC.js의 모습은 아래와 같다.

import React, {Component} from 'react';

class TOC extends Component {
    render(){
      return(
        <nav>
          <ul>
            <li><a href = "1.html">HTML</a></li>
            <li><a href = "2.html">CSS</a></li>
            <li><a href = "3.html">JavaScript</a></li>
          </ul>
        </nav>
      )
    }
  }

  export default TOC;

또한 이 TOC.js 파일을 사용하기 위해 App.js에서 import 해준다.

import TOC from "./components/TOC"

다 한 결과는 아래와 같다.