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

에피소드를 누르면 해당 뷰어로 이동합니다. 지금까지 해왔던 방식과 동일하므로 어렵지 않습니다.

우선 이미지를 더미 데이터에 넣기 위해 이전 편에서 사용했던 episode_list.json 파일에 이미지 리스트를 추가합니다.

/public/dummy/episode_list.json (전체 코드)

이후 전편과 동일하게 axios로 api를 불러와서 제목과, 이미지를 화면에 그려주면 끝납니다. props.match.params.episodeId 로 현재 에피소드의 ID와 일치하는 이미지들을 루프를 돌면서 그려줍니다.

/src/container/Viewer.js

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

다음편 : React 강좌 tutorial 6 - GNB 처리 (웹툰서비스 만들기)