동적 라우팅을 통해 카테고리를 클릭 할 때 마다 다른 상품들, 표지 이미지를 변경시켜 주었다.

리스트 페이지에 처음 들어갔을 때 전체에 스타일이 적용되어 있어야 하고 새로고침을 하여도 내가 클릭한 카테고리가 selected 되있어야 한다!

path 파라미터 vs Query 파라미터

• 처음 이 기능을 구현하고자 할 때는 path 파라미터를 사용하였다. 이 방법을 사용할 경우, 카테고리 배열을 그 길이만큼 복사해 false값을 채워놓고 클릭한 카테고리의 id값을 받아와 스타일링을 주는 방식을 택하였다.

⚡️ Query 파라미터로 변경하게된 이유 :

• 일단 해당 카테고리 클릭 이벤트를 거는 것도 번거로운데, 새로고침을 할 시에 해당 셀렉트 값이 유지되지가 않았다. (걸어준 이벤트가 초기화 되어버림) 😭

• path 파라미터를 사용하면 Route.js에 해당 동적 라우팅을 받아올 페이지를 새로 받아와서, 카테고리 요소를 클릭 할 때 마다 새로운 페이지를 받아오는 것이다.

• 이 때 새로고침을 할 시 state, props값이 다 초기화 되어버리기 때문에 내가 설정한 false로 채워진 배열도 새로고침 시에는 다시 모든 요소들이 false로 바뀌어 버린다.

• Query 파라미터를 사용하면 위와 같이 라우트를 하나 더 추가할 필요도 없어지고, 새로고침을 할 때에도 다른 페이지가 아니라, 하나의 페이지에서 배열(카테고리 이름)의 값만 서로 매칭시켜주면 되기 때문에 훨씬 손쉽게 구현할 수 있다.

Query 파라미터를 선택할 경우, category 컴포넌트에서 `this.props.history.push()를 통해 보내준 값을 위와 같이 내가 원하는 대로 slicing해서 사용할 수 있다.

각각의 값을 받아오는 법.

• path 파라미터 : this.props.match.params

• query 파라미터 : this.props.location.search

카테고리 타이틀과 this.props.location.search를 통해 받아온 값을 비교 및 매칭해주므로 새로고침을 해도 변경된 className이 유지 되면서 선택한 카테고리의 스타일링이 유지되는 것을 알 수 있다!