[배민문방구] Nav에서 조정하는데 전혀 상관없는 Product에서 리스트 받기?

어쩌다 보니 Frontend의 react까지 하게 되었다.
이것은 각각의 Component로 되어 있는 상태에서 Category tab을 이동하기 위한... 발악을 남겨보려 한다.

머리속으로 그려보기☀️

위와 같이 카테고리 탭을 누르면 query parameter로 전달이 되고 fetch가 되어야 할 것 같다.

근데 카테고리 자체가 component이며 아래의 product list도 component이다.
이 둘을 어떻게 연결시켜서 productList를 받을 수 있을까...

실제 코드 짜기🚀

어떻게 해야할지 멘붕의 연속이었다.
뭔가 어거지로 껴 맞춰서 한 느낌이 없잖아 있지만..
과거의 나를 보며 웃을 미래의 나에게 보내는 블로깅이다....ㅋㅋㅋㅋㅋㅋ

Nav.js에서는 url만 바꿔주기!

각 카테고리별로 누르게 되면 menuChange() 이벤트가 발생한다.
파라미터로는 id를 받는데 이 id란 각 카테고리의 한글이름이다.

따라서 이 menuChange()가 실행되면
/product?category=문구 같은 형식이 된다.

ProductList.js!!

ProductList.js에서는 바뀐 url를 기준으로 진짜 fetch를 보내 productList를 받는다.

이 productList는 state중 하나로 설정하여 바뀌면 reRender가 되게 한다.
getProductList()를 만들어서 현재 주소에 대한 리스트를 받는다.

componentDidMount()

처음 카테고리를 선택해서 실행하게 되면 해당 이름이 고정된다.
예) 전체 누르면 category='전체'

componentDidUpdate()

처음 카테고리를 누른 상태에서 다른 카테고리로 가면 fetch를 실행하는 로직이 없기에 변화가 없다.

그래서 componentDidUpdate를 만들어서 현재 category값과 다르다면 getProductList()를 다시 실행하고 setState를 현재 category값으로 변경해준다.