React 강좌 tutorial 1 - 시작하기, Router 적용 (웹툰서비스 만들기)

HTML, CSS, JS 에 대한 강좌는 아닙니다.

React의 대한 기본 개념을 알고 있는 상태에서 실제 서비스를 어떻게 구현하는지 알아보는 예제입니다.

---

모든 코드는 https://github.com/yunyong/react-tutorial-webtoon 에서 확인하실 수 있습니다.

tutorial_01 ~ 06까지 브랜치로 나뉘어져 있으니, 각 강좌에 맞는 코드를 쉽게 찾으실 수 있습니다.

CSS 관련 코딩은 포스트에서 제외되었습니다. Github 코드를 참고 해주시기 바랍니다.

---

우선, create-react-app으로 새로운 프로젝트를 생성합니다.

$ create-react-app react-tutorial-webtoon

완료되었으면 

$ cd react-tutorial-webtoon 

$ npm start

로 페이지가 잘 뜨는지 확인해봅시다. (localhost:3000)

이 페이지가 뜨면 이제 시작할 준비가 되었습니다.

웹툰 서비스는 크게 메인(리스트) Main, 웹툰 상세 페이지 WebtoonHome, 웹툰 뷰어 Viewer 로 나눌 수 있겠네요.

각 페이지에 맞는 컨테이너 컴포넌트를 만들겠습니다.

컴포넌트는 특별한 이유가 없으면 함수형으로 빠르게 제작하는게 좋지만,

컨테이너 역할을 하는 컴포넌트들은 prop를 router를 통해 전달 받을 예정이므로 class형으로 만들겠습니다.

/src/container/

이제 페이지 이동을 구현하기 위해 router 구현을 해보도록 하겠습니다.

$ npm install react-router-dom —save 

react-router-dom 을 설치해주시구요.

App.js 를 Router로 감싸줍니다. (필요없는 코드들은 다 지웠습니다.)

/src/App.js

주소창에

/

/webtoon/123

/viewer/456

으로 접속했을때 각 컴포넌트가 보이면 성공입니다.

이번 강의의 모든 코드는 Github : tutorial_01 에서 확인하실 수 있습니다.

다음편 : React 강좌 tutorial 2 - 공통 컴포넌트 만들기 (웹툰서비스 만들기)