[생활코딩]react component 파일로 분리하기

실습 시작 전 chrome react developer tools를 다운받자

 

src 폴더 안에 components 폴더를 생성한다. components 폴더 안에 TOC.js 파일을 생성한다. 

TOC.js 에 다음 코드를 작성한다.

첫 번째 줄에 import 부분은 'react 라이브러리에서 Component 라고 하는 클래스를 로딩한다' 라는 뜻이다. 

마지막 줄은 'TOC 라는 클래스를 외부에서 사용할 것을 허용하는 코드' 이다.

import React, {Component } from 'react';

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>
      );
    }
  }
  export default TOC;

 

 

그리고 App.js 에 TOC 클래스를 삭제하고 다음 코드를 작성한다.

import TOC from "./components/TOC"

 

 

코드 분리 후 src/App.js

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

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;

 

 

다른 클래스들도 똑같이 진행해주면 코드가 훨씬 간결해진다.