React 세미나2 url 변경 시 context 값이 초기화되는 현상에 관한 질문 about seminar-2022

[fluentmin]

답변 감사합니다! context를 사용하는 게 처음이다보니 서툴러서 발생한 문제인 줄 알았는데, 당연한 것이었군요.
로컬 스토리지를 이용하는 코드도 첨부해주셔서 감사합니다. 참고하여 관련된 부분 찾아보고, 코드에도 반영해보겠습니다!(아마 다음 과제에..)

[joongwon]

react-router가 제공하는 Link와 navigate 등을 통해 링크를 바꾸는 경우, 일반적인 a 태그처럼 새로 페이지를 불러오는 것이 아니라 주소값만 바꾸어 새로 렌더링하게 됩니다. 하지만 주소창을 직접 수정하여 이동하는 경우 기본적으로 모든 HTML+CSS+JS를 서버에서 새로 불러오게 됩니다. 새로고침할 때처럼 내부적으로 저장되어있던 useState나 context의 모든 상태들도 초기화되는 것이 당연합니다.
이를 막으려면 로컬스토리지나 쿠키에 필요한 값을 저장하여 페이지 전환 간에도 상태를 유지할 수 있습니다. 이번 과제에서 해당 부분은 채점하지 않겠지만 연습 삼아 해보시는 것도 괜찮을 것 같습니다. setLoginObj를 그대로 넘기 않고 스토리지에 저장하도록 persistLoginObj로 한번 감싸서 provider의 value로 넣어줄 수 있겠습니다.

useEffect(() => {
    const storedLoginObj = localStorage.getItem("loginObj"));
    setLoginObj(JSON.parse(storedLoginObj));
}, []); // 빈 dependency array를 설정하면 마운트될 때 한번만 실행됩니다.
function persistLoginObj(newLoginObj) {
    setLoginObj(newLoginObj);
    localStorage.setItem("loginObj", JSON.stringify(newLoginObj));
}