[React] 컴포넌트 파일 분리

컴포넌트가 많아지면 또 이 컴포넌트들을 분리해줄 필요가 있다.

그리고 App.js에 파일에 있어서 다른 파일에서 이 파일 안의 컴포넌트들을 가져다가 쓰기 어렵다.

 

각각 컴포넌트 별로 파일로 쪼개 볼 것이다.

 

우선 src 디렉터리에 components 라는 디렉터리를 만들 것이다.

이 디렉터리 안에 각각의 컴포넌트 별로 파일을 만들어 줄 것이다.

 

create-react-app이 기본적으로 index.js를 보면

App이라는 컴포넌트를 같은 디렉터리에 있는 App.js라는 파일에서 import해서 쓰고 있는 것이다.

 

 

components 디렉터리에 TOC.js 파일을 만들고 TOC 컴포넌트를 복붙했다

(여기서 각 에디터에 따라서 컴포넌트를 클래스가 사용되고 있는데 이것을 로딩하는 코드가 없다고 하면서 빨간줄이 뜰 수 도 있다.)

 

그 다음에 TOC라는 파일 안에 여러가지 변수, 함수가 존재할 수 있다.

이 중에서 외부에서 사용할 수 있게 하는 것이 export 이다. 즉, TOC라는 클래스를 외부에서 쓸 수 있는 것이다.

 

이렇게 컴포넌트를 분리해주었으니 App.js 파일에서는 TOC 클래스를 지워주고 

TOC 파일을 import 해준다.

import TOC from "./components/TOC"

 

나머지 컴포넌트도 분리해주었다.

 

🔽 App.js

import './App.css';
import React, { Component } from 'react';
import TOC from "./components/TOC"
import Content from "./components/Content"
import Subject from "./components/Subject"



// 컴포넌트를 만드는 코드 (템플릿)
// 리액트의 Component라고 하는 클래스를 상속하는
// App 이라는 클래스 - render()라는 함수를 가지고 있다.
class App extends Component {
  render(){
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        <Subject title="React" sub="for UI"></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
      </div>
    );
  }
  
}

export default App;