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

GNB를 제외한 모든 페이지 개발은 완료 되었습니다.

월/화/수 링크를 클릭하면 요일에 맞게 리스트를 그려주는 작업을 해보도록 하겠습니다.

우선 Gnb 컴포넌트의 a태그를 Link로 바꾸고, 경로를 메인 페이지, query string으로 요일을 명시합니다.

props로 day를 받아 해당 요일이면 on 클래스를 추가해주는 작업도 합니다.

/src/component/Gnb.js

이제 Gnb를 클릭하면 Main 컴포넌트에 props.location.search 로 day 값을 얻을 수 있습니다.

day의 기본값은 월요일, day 값이 있다면 해당 요일로 set해주는 작업을 해줍니다.

/src/container/Main.js

이어서, componentDidUpdate를 통해 day값이 바뀌면 새로운 리스트를 그려주는 작업을 진행합니다.

/src/container/Main.js

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

---

모든 내용이 끝났습니다. 간단한 예제였지만 React js를 사용하는데 도움 되셨길 바랍니다. 

부족한 포스트였지만 읽어 주셔서 감사합니다!