[TIL/React] 2023/10/03

상세 페이지 전체적인 구조 🟢

1)

2)

3)

4)

상세 페이지 주요 로직 🟢

useParams()를 통해 url에 부여된 id를 가져온다. useLocation()을 통해 url에 대한 정보를 담고 있는 location 객체를 가져오는데, navigate를 통해 페이지를 이동함과 동시에 state를 전달할 수 있다는 점이 핵심이다.

쇼핑 페이지에서 띄우는 modal에 포함된 navigate 로직이다. state라는 key에 category라는 value를 담아서 전달하고 있음을 확인할 수 있다. getCardData는 잘 못 작성한 것이니 무시해도 되겠다.

location 객체에서 state라는 key를 찾을 수 있다.

결국 MapData는 기존에 작성한 shoppingData에서 category라는 키를 변수로서 접근해서 얻은, 개별 '배열 데이터'가 된다.

DetailData는 MapData 배열에 있는 개별 객체의 id와 useParams로부터 얻은 id가 일치할 때 획득 가능한 하나의 객체 데이터이다. 가령 id가 1인 돼지 상품이 useParams의 id인 1과 일치한다면, 해당 상품은 DetailData가 되고, 이러한 DetailData를 활용하여 필요한 정보를 보여주게 된다.

상세 페이지 현재 모습 🟢

회고 🟢

부족한 부분

1) 구조를 잡느라 반응형을 전혀 신경쓰지 않았다. ``반응형``을 구현할 것 2) ``바로구매와 장바구니 버튼` 각각을 눌렀을 떄의 페이지 이동이 반영되지 않았다. 버튼을 눌렀을 때 어떤 `페이지로 이동``해야 하는지 고민할 것 3) ``옵션과 수량`에서 사용할 `슬라이더``에 대해 고민할 것