Redux 5 : 장바구니 기능 만들기 숙제 & 응용문제 강좌 질문

[백종수]

안녕하세요. Redux 5 : 장바구니 기능 만들기 숙제 & 응용 문제를 수강한 학생입니다.
강좌 시청 중 질문이 있어 게시글 작성하게 됐습니다.

구매하기 버튼을 누르면 정상적으로 store.js 내부 cart배열에 담기고 목록까지 출력까지 됩니다.
그런데 상품 탭에 다른 상품으로 이동하고 구매하기 버튼을 누른 뒤, 다시 cart페이지로 이동하면 배열이 밀렸는지 방금 담은 상품만 출력됩니다.

저는 페이지 이동을 url이 아닌 route를 이용해 하고 있고,
리액트는 싱글 어플리케이션 페이지로 제가 새로 고침을 하지 않는 이상 store의 배열이 재 선언되면서 밀리지 않는다고 생각합니다.
제가 잘못 알고 있는걸까요 아니면 원래 밀리는걸까요?

store.js 슬라이스부분











detail.js 버튼 onclick 부분


app.js route부분


정상 출력 된 사이트 화면

[codingapple]

주소창이나 a태그말고 navigate() 이용해서 페이지이동해봅시다

[백종수]

선생님이 말씀해주신 대로 수정하니 잘 작동 됩니다. 덕분에 a, link, navigate의 차이를 다시 정리 할 수 있게 됐습니다.

a태그는 페이지를 이동하면서 새로 고침 즉, 상태 초기화와 컴포 넌트를 밀고 재 렌더링
link태그는 주소만 바꾸고 새로 고침을 하지 않음
navigate는 함수 내부에 조건을 만족 할 때 이동되며 link와 같다

가르침 감사합니다 :)

[글쓴이]

글