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

src > App.js

 import { render } from '@testing-library/react';
 import React, { Component } from 'react';
 import './App.css'; 

 class Subject extends Component {
  render() {
    return (
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
 }
 
...중략

 class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        <TOC></TOC>
         <Content title="HTML" desc="HTML is Markup Language"></Content>
      </div>
   );
  }
 }

 export default App;

전차수의 소스이다. 중략을 했지만 이 소스가 너무 길어지면 가독성이 떨어지고,
관리가 불편하기 때문에 컴포넌트별로 파일을 분리하여 편리하게 관리하고자 한다.



컴포넌트별로 파일 분리방법 순서

그림1

 

그림2

1. src에 오른쪽 마우스를 눌러서 new folder로 components폴더를 만들어준다. (그림1)

2. 이전에 만들어둔 컴포넌트의 이름을 따라 세 개의 컴포넌트를 js파일로 만들어준다. (그림1)

3. (그림2)처럼 내용처럼 복붙을 해주는데, import와 export부분도 잊지 않고 이름에 따라 넣어준다.
import는 해당 컴포넌트를 react안에서 쓸 수 있게 해준다는 뜻 정도,
export는 해당 컴포넌트를 다른 곳에서도 사용할 수 있게 해준다는 의미이다.

4. 분리된 컴포넌트들을 App안에서도 쓰게 해주려면 import가 필수적이다.
import TOC from "./components/TOC";
import Subject from "./components/Subject";
import Content from "./components/Content";
이런 이름으로 App의 맨 위에 임포트를 시켜주면 된다.

=> 이렇게 쓰면 App.js 파일 안에는 class App extends Component만 남아서 훨씬 편리하게 이용할 수 있다.