[React] Component로 분리

더 간결한 코드를 이용하기 위해 App.js에 코드를 모두 쓰지말고,

Component를 각각 분리 해줄 것이다.

 

원래 코드 

App.js

import logo from './logo.svg';
import './App.css';
import { Component } from 'react';
class Subject extends Component {
  render() {
    return (
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
}
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>
    )
  }
}
class Content extends Component {
  render() {
    return (
      <article>
        <h2>{this.props.title}</h2>
        {this.props.desc}
      </article>
    )
  }
}
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      Subject:{title:'WEB', sub:"World Wid Web!"},
      Content:[
        {id:1,title:'HTML', desc:'HTML is for informatin'},
        {id:2,title:'CSS', desc:'CSS is for design'},
        {id:3,title:'JavaScript', desc:'JavaScript is for interactive'}
      ]
    }
  }
  render() {
    return (
      <div className="App">
        <Subject>
          title={this.state.Subject.title}
          sub={this.state.Subject.sub}
        </Subject>
        <TOC data={this.state.Content}></TOC>
        <Content title="HTML" desc="HTML is HyperText Markup Language"></Content>
      </div>
    );
  }
}

export default App;

class별로 각각 분리해주기 위해

src내에 컴포넌트 폴더를 만든 후 각자 js파일을 만들어준다.

분리한 component별로 js를 따로 작성하여주고

export default 클래스명

을 꼭 해준다

 

 

후에 App.js 내에서 import해준다

실행 결과 화면은 같으나,

App.js 코드가 더 간결해진 것을 확인할 수 있다.

지금은 짧아서 괜찮지만,

나중에 1000줄 코드를 App.js에 다 때려박으면 보기 힘들기 때문에 각자 분리한다