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 한다.

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

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

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

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

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

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

– quiz