개발자

Next.js 페이지 상태 초기화가 안돼요

2022년 12월 21일조회 523

프로젝트에서 next.js를 사용중인데요. 분명 페이지 이동을 하는데 이전 페이지 상태가 보존됩니다. 혹시 이유를 아시는 분 아시나요? 현재 경로가 /articles/[id] 형태로 되어있고, 해당 페이지 컴포넌트에서 다른 아티클로 이동할 수 있는 장치가 있습니다. (인기있는 아티클을 추천해주고 해당 버튼을 누르면 다시 /articles/[id] 페이지로 이동합니다) 근데 id가 바뀜에도 불구하고 페이지는 이전 아티클에 대한 정보를 가지고 있어요 ㅠㅠ

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

손정현님의 프로필 사진

안녕하세요! "근데 id가 바뀜에도 불구하고 페이지는 이전 아티클에 대한 정보를 가지고 있어요 ㅠㅠ" 코드가 없어서 정확한 원인은 알지 못하지만, 이전 아티클에 대한 정보를 가지고 있다고 함은 상태 관리가 잘 안되고 있는것 같습니다. 상태 관리는 어떤 식으로 하고 계신지 알려주시면 더 도움이 될 것 같습니다. 우선 Next.js가 react를 기반으로 돌아가는 것은 이해하실거라고 생각되는데요. 매 렌더링 시 react는 바꿀 필요가 없는 컴포넌트라면 굳이 바꿔주지 않습니다 (상태가 보존됩니다). 이는 클라이언트 쪽 라우팅에서도 해당되는데요. Next.js에서 제공하는 Link나 router를 사용하셨다면 웹 페이지 내에서 페이지 이동은 클라이언트 쪽 라우팅입니다. /articles/[id] 에서 다시 /articles/[id]로 이동할때 해당 페이지 속 컴포넌트 A가 바꿀 필요없는 컴포넌트라고 판단되면 react는 이전 페이지에서 렌더링한 컴포넌트 A를 그대로 보여줄겁니다. 만약 컴포넌트 A의 상태를 초기화 해주셔야한다면 여러가지 방법이 있는데요. (어떤 방식이 적절한지 문서를 보고 직접 판단하셔야합니다) 우선 위 케이스에서 제가 추천드리는 방법은 컴포넌트 A의 속성으로 유니크한 key 값을 넣어주는건데요. /articles/[id]에서 사용하는 id가 유니크하다는 가정하에 해당 값을 <Component A key={id} />로 넘겨주면 될 것 같습니다. 이게 가능한 이유는 react에서 컴포넌트가 새로운 컴포넌트인지 비교하는 값 중에 key 값을 사용하기 때문에, id가 유니크하다면 같은 ComponentA여도 다른 컴포넌트로 인식되기 때문입니다. 좀 더 자세한 내용과 초기화 방법에 대해서는 공식 문서를 참고해주세요 :) - https://beta.reactjs.org/learn/preserving-and-resetting-state

profile picture

익명

작성자

2022년 12월 26일

key 값으로 해결됐어요! 감사합니다

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!