prerequisite

+ es6 import

+ es6 export

migration

먼저 페이지 방식의 소스를 그대로 가져와서 create-reacp-app 에서 구동되도록 마이그레이션부터 해보자.

엔트리포인트인 index.js 에 이미 ReactDOM.render()로 렌더링 하고 있으므로 기존 소스에서 렌더링 하고 있는 부분만 제외하고 모두 App.js 컴포넌트로 복사한다. 기존 App.js에 있는 소스는 모두 삭제하고 복사한다.

그리고, 기존 app.css는 App.css 로 모두 복사한다.

실행해서 기존 화면 그대로 나오는지 확인한다.

break into module

App.js 안에는 Header 컴포넌트, Player 컴포넌트, Counter 컴포넌트가 모두 같이 들어가 있다. 이제 이 컴포넌트들을 별도의 화일로 분리한다.

먼저 Header 컴포넌트를 분리한다. App.js에 있는 Header 컴포넌트를 잘라내서 src 폴더 아래에 components 폴더를 만들고 Header.jsx 화일을 추가 후 그 안에 복사한다. 그리고, 맨 상단에는 react를 import 한다.

import React from 'react';

const Header = (props) => {
  console.log(props);
  return (
    

      
{ props.title }
      Players: { props.totalPlayers }
    
  )
}

export default Header;

아직 에러가 날 것이다. App.js에서 Header 컴포넌트를 인식할 수 없기 때문이다. App.js를 App.jax로 rename 한 후에 App.jsx에 Header 컴포넌트를 import 한다.

import Header from './components/Header';

Counter.jsx를 추가하고 App.jsx에서 Counter 컴포넌트를 분리해서 넣는다.

import React from "react";

class Counter extends React.Component {
  state = {
    score: 0
  };

  incrementScore = () => {
    console.log(this);
    this.setState(prevState => {
      return {score: prevState.score + 1}
    });
  }

  decrementScore = () => {
    this.setState(prevState => {
      return {score: prevState.score - 1}
    });
  }

  render() {
    return (
      

         - 
        {this.state.score}
         + 
      
    );
  }
}

export default Counter;

Player 컴포넌트도 동일하게 분리한다. src 아래 components 에 Player.jsx를 추가하고 App.jsx에서 Player 컴포넌트를 잘라내서 집어 넣는다.

Counter 컴포넌트가 없어서 컴파일 에러가 Player 컴포넌트에서 발생할것이므로 import 구문을 추가한다.

import React from "react";
import Counter from "./Counter";

const Player = (props) => {
  console.log(props);
  return (
    

      
         props.removePlayer(props.id)}>x
      
      
        {props.name}
      
      
    
  );
}

export default Player;

그리고 App.jsx에 Player 컴포넌트를 import 한다. 다 분리된 App.jsx 는 다음과 같다.

import React from 'react';
import './App.css';
import Header from "./components/Header";
import Player from "./components/Player";

class App extends React.Component {
  state = {
    players: [
      {name: 'LDK', id: 1},
      {name: 'HONG', id: 2},
      {name: 'KIM', id: 3},
      {name: 'PARK', id: 4},
    ]
  };
  handleRemovePlayer = (id) => {
    this.setState(prevState => {
      return {
        players: prevState.players.filter(item => item.id !== id)
      }
    })
  }
  render() {
    return (
      

        


        {/*Players List*/}
        { this.state.players.map(item => )
        }
      
    );
  }
}

export default App;

이제 화면이 정상적으로 보이는지 확인하자. 만일 webpack-dev-server가 정상 동작 되지 않는다면 리스타트를 한번 시도해보자.

– quiz