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

HTML, CSS,JS 에 대한 강좌는 아닙니다.React에 대한 기본 개념을 아고 있는 상태에서 실제 서비스를 어떻게 구현하는지 알아보는 예제입니다.​모든 코드는 https://github.com/yunyoung/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형으로 만들겠습니다.

이제 페이지 이동을 구현하기 위해 router 구현을 해보도록 하겠습니다.$npm install react-router-dom –savereact-router-dom을 설치해 주세요.App.js를 Router로 감싸줍니다.

주소창에//webtoon/123/viewer/456으로 접속했을때 각 컴포넌트가 보이면 성공입니다.​#react #reactDOM #리액트 #개발언어 #개발자 #개발도구