[생활코딩-React] Component 파일로 분리하기

[출처 : Youtube - 생활코딩]

https://youtu.be/8hGqznPGVc0?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi

 

src 디렉토리 안에 components 디렉토리를 생성한다.

 

 

components 디렉토리 안에는 TOC.js라는 파일을 생성한다.

 

TOC.js 파일에다가 App.js의 TOC 클래스를 복붙한다.

아래의 코드도 같이 복붙한다.

import React, { Component } from 'react';

'react라는 라이브러리에서 Component라고 하는 클래스를 로딩한다' 라는 뜻이다.

리액트를 사용할 땐 필수적으로 넣어야하는 코드라고 생각하면 된다.

 

 

 

TOC라는 클래스를 외부에서 사용할 것을 허용하는 코드도 작성한다.

export default TOC;

 

 

 

아래의 코드를 작성하고 App.js 내의 TOC 클래스는 삭제한다.

import TOC from "./components/TOC";

 

 

src/App.js

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

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

class Content extends Component {
  render() {
    return (
      <article>
          <h2>{this.props.title}</h2>
          {this.props.desc}
      </article>
    );
  }
}

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 HyperText Markup Language."></Content>
      </div>
    );
  }
}

export default App;

 

 

 

다른 클래스들도 똑같이 해준다.

이렇게 하면 코드가 훨씬 간결해진다.

 

 

src/App.js (코드 분리 후)

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

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 HyperText Markup Language."></Content>
      </div>
    );
  }
}

export default App;