React 강좌 tutorial 4 - 웹툰 상세페이지 (웹툰서비스 만들기)

이번에는 웹툰 상세페이지를 만들어 보겠습니다.

메인 페이지에서 감상하고 싶은 웹툰을 누르면 상세페이지로 이동합니다.

우선 Link 를 /webtoon/웹툰ID 로 수정해줍니다. 그러면 1장에서 만들었던 WebtoonHome 으로 이동합니다.

그리고 웹툰ID는 props.match.params.webtoonId로 접근할 수 있습니다. (이는 1장 router 부분을 참고)

이 페이지에서는 웹툰의 상세정보와 해당 웹툰의 에피소드 리스트를 표현합니다.

3장에서와 마찬가지로 더미 데이터를 우선 만들고 시작하겠습니다.

/public/dummy/webtoon_detail.json (웹툰 상세 정보)

/public/dummy/episode_list.json (에피소드 리스트)

WebtoonHome 에서 axios로 방금 만든 2개의 데이터를 가지고 옵니다.

웹툰ID로 타겟이 되는 웹툰의 정보와 에피소드 리스트를 추려 state에 저장합니다.

/src/container/WebtoonHome.js

웹툰 정보는 WebtoonInfo 컴포넌트로,

에피소드 리스트는 EpisodeList 컴포넌트로 구현해줍니다.

각각 웹툰의 상세정보(객체)와 에피소드 리스트(배열)를 전달 합니다. 

/src/component/EpisodeList.js

/src/component/WebtoonInfo.js

완성된 페이지는 이렇습니다.

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

다음편 : React 강좌 tutorial 5 - 뷰어 (웹툰서비스 만들기)