Route안의 Props가 업데이트 되지 않는 경우?

[카두룩치]

쇼핑몰 만드는 예제를 보고 있는데요.

<Route path="/" element={}/>
위 default 페이지에서 더보기 버튼을 누르면 useState로 지정된 shoes에 3개의 데이터를 받아와 추가해주도록 하는 코드를 짰습니다.
(setShoes[...]) 이런식으로요.

이거 다음에

<Route path="/detail/:id" element={<Detail shoes={shoes} />}></Route>

 

이렇게 해주니까.. path가 "/"일 때 shoes데이터가 6개가 되었음을 console.log로 확인이 되었는데,

신발 이미지를 클릭해 Detail페이지로 넘어가면 shoes데이터가 다시 3개가 되면서

4번째 신발부터 동작이 되지 않습니다..

"/" 페이지에서 출력한 shoes

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 0, title: 'White and Black', content: 'Born in France', price: 120000}
1: {id: 1, title: 'Red Knit', content: 'Born in Seoul', price: 110000}
2: {id: 2, title: 'Grey Yordan', content: 'Born in the States', price: 130000}
3: {id: 3, title: 'Flowey', content: 'only 5 inches', price: 120000}
4: {id: 4, title: 'Baby shoes', content: 'for less than 6', price: 120000}
5: {id: 5, title: 'Red Herring', content: 'Born in France', price: 120000}
length: 6

Detail로 넘어간 뒤에 출력된 shoes

(3) [{…}, {…}, {…}]
0: {id: 0, title: 'White and Black', content: 'Born in France', price: 120000}
1: {id: 1, title: 'Red Knit', content: 'Born in Seoul', price: 110000}
2: {id: 2, title: 'Grey Yordan', content: 'Born in the States', price: 130000}
length: 3

이게 redux toolkit을 이용하면 해결이 될 것 같긴한데.. props 관점에서

Route A에서 업데이트 된 State S가

Route B에 props에도 들어갈 경우, A에서 업데이트 된 값이 B에 들어가도록 하려면 어떻게 해야할까요..?

이게 안 되어서, 4번째 신발부터는 위 화면이 정상적으로 안 뜨고, 빨간 글씨로 오류가 뜹니다.(undefined)

[codingapple]

브라우저가 새로고침되면 state가 초기값으로 리셋됩니다

페이지이동하다가 새로고침되거나 그런게 아닐까요 

[카두룩치]

아 원인을 찾았네요. 카드 클릭할 때 <a href=""> 로 페이지 이동해서 그렇네요

onClick = {() => navigate()} 요걸로 해결했습니다.

[글쓴이]

글