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 한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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; |
아직 에러가 날 것이다. App.js에서 Header 컴포넌트를 인식할 수 없기 때문이다. App.js를 App.jax로 rename 한 후에 App.jsx에 Header 컴포넌트를 import 한다.
1 |
import Header from './components/Header'; |
Counter.jsx를 추가하고 App.jsx에서 Counter 컴포넌트를 분리해서 넣는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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; |
Player 컴포넌트도 동일하게 분리한다. src 아래 components 에 Player.jsx를 추가하고 App.jsx에서 Player 컴포넌트를 잘라내서 집어 넣는다.
Counter 컴포넌트가 없어서 컴파일 에러가 Player 컴포넌트에서 발생할것이므로 import 구문을 추가한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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; |
그리고 App.jsx에 Player 컴포넌트를 import 한다. 다 분리된 App.jsx 는 다음과 같다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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; |
이제 화면이 정상적으로 보이는지 확인하자. 만일 webpack-dev-server가 정상 동작 되지 않는다면 리스타트를 한번 시도해보자.