React 강좌 tutorial 3 - 메인 페이지 (웹툰서비스 만들기)

이번장에서는 메인 페이지를 만들어 보겠습니다. 메인 페이지는 요일별 웹툰 리스트를 표시해줍니다.

해야할 일을 정의해보면,

1. 요일별 웹툰 리스트 JSON 데이터 만들기 (더미 데이터)

2. Main 컴포넌트에서 axios로 데이터 가져오기

3. 요일별 웹툰 리스트 컴포넌트 만들기

우선 간단한 JSON파일을 만듭니다. 

(실제 프로젝트라면 REST API를 호출하겠지만, 이 강좌에 백엔드 영역은 포함되지 않습니다. 그냥 임시로 JSON 파일을 만들어서 활용하겠습니다.) 

메인 화면에서 노출 될 웹툰 리스트이며, 각 웹툰은 요일을 가지고 있습니다. 이 파일을 axios를 이용해 불러올 것이기 때문에 src/폴더가 아닌 public/폴더의 dummy/폴더를 만들어서 넣어 두었습니다.

/public/dummy/webtoon_list.json

데이터가 구현되었으니 메인 컴포넌트에서 불러와 봅시다. 이 파일을 불러오기 위한 axios를 설치합니다.

$ npm install --save axios

그 후 axios.get( )을 통해 서버와 통신합니다. 받아 온 webtoonList는 메인 컴포넌트의  state로 지정합니다.

/src/container/Main.js

this.state.webtoonList에 저장된 리스트를 표현하기 위한 컴포넌트

WebtoonList.js 파일을 만듭니다. 이 컴포넌트는 요일에 해당하는 리스트를 받아 구현됩니다.

filter( ) 를 이용해서 요일에 해당하는 웹툰들만 리스트로 넘겨줍니다.

월요일에 해당하는 웹툰을 받아서 WebtoonList 에서 반복문을 이용해 구현해줍니다.

/src/component/WebtoonList.js

/src/container/Main.js (전체 코드)

이런 화면이 나오면 성공입니다.

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

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