react -여러개의 화일로 쪼개고 모듈화하기, import, export

prerequisite

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 (
    <header>
      <h1>{ props.title }</h1>
      <span className="stats">Players: { props.totalPlayers }</span>
    </header>
  )
}

export default Header;

import React from 'react';

const Header = (props) => {

console.log(props);

return (

<h1>{ props.title }</h1>

<span className="stats">Players: { props.totalPlayers }</span>

</header>

)

}

export default Header;

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

import Header from './components/Header';

1	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 (
      <div className="counter">
        <button className="counter-action decrement" onClick={this.decrementScore}> - </button>
        <span className="counter-score">{this.state.score}</span>
        <button className="counter-action increment" onClick={this.incrementScore}> + </button>
      </div>
    );
  }
}

export default 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 (

<span className="counter-score">{this.state.score}</span>

</div>

);

}

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 (
    <div className="player">
      <span className="player-name">
        <button className="remove-player" onClick={() => props.removePlayer(props.id)}>x</button>
      </span>
      <span className="player-name">
        {props.name}
      </span>
      <Counter />
    </div>
  );
}

export default Player;

import React from "react";

import Counter from "./Counter";

const Player = (props) => {

console.log(props);

return (

<button className="remove-player" onClick={() => props.removePlayer(props.id)}>x</button>

</span>

{props.name}

</span>

</div>

);

}

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 (
      <div className="scoreboard">
        <Header title="My scoreboard" totalPlayers={this.state.players.length} />

        {/*Players List*/}
        { this.state.players.map(item => <Player name={item.name}
                                                 key={item.id.toString()} removePlayer={this.handleRemovePlayer}
                                                 id={item.id} />)
        }
      </div>
    );
  }
}

export default App;

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 => <Player name={item.name}

key={item.id.toString()} removePlayer={this.handleRemovePlayer}

id={item.id} />)

}

</div>

);

}

export default App;

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

break into module

prerequisite

migration

break into module

– quiz