React 생활코딩 - 9. Component 파일로 분리하기

먼저 src에 아래처럼 폴더를 만들어준다

 

그 안에 아래 파일을 만든다.

 

App.js에서 적혀진 TOC를 TOC.js 에 입력하면 아래처럼 오류가 나온다. 이는 사용하는 editor에 따라 있을 수도 없을 수도 있다. 근데 다시보니 lass 로 적혀있다.. 그래서 오류가 나온것. class로 다시 적어주니 오류 메시지가 사라진다.

 

그리고 import React, { Component } from 'react' 를 넣어준다

from  'react' 라는 라이브러리에서 { Component } 라고하는 클래스를 로딩한 것 즉, 아래 extends Component가 사용하고 있는 것이다.

앞에 적혀진 import React 는 필수적으로 적어야한다.

 

이 toc라는 파일안에 여러가지 변수나 함수들이 안에 존재 할 수 있는데, 그 많은 것들 중에서 나는 어떤 것을 외부에서 사용할 수 있게 허용할 것인가? 할 때 사용하는 것이 export default TOC;

 

아래처럼 적어준다

 

이제 만들어진 TOC.js를 적용할 수 있다.

App.js에 만든 TOC 를 import 해주고 적어주었던 TOC는 삭제해준다.

 

보이는 건 같지만 코드는 훨씬 더 간단해졌다. 나머지도 그렇게 만들어준다.

 

나머지도 위처럼 만들어준다.

 

 

폴더를 만들어주고 수정을 했는데 위의 에러가 나온다. 폴더에 맞게 파일도 들어가져있다. 

오류 원인은  export default TOC;  

다시 넣어줘서 완성!