react link sessionstorage performance error issue

[yeonsumia]

안녕하세요, react assignment 2를 하면서 질문이 생겨 issue 게재합니다.

<Link to='/students' onClick={() => window.sessionStorage.setItem('loginCheck', 'true')}>
      <div className="LoginButton">
            ...
      </div>
</Link>

다음과 같이 session storage에 로그인 정보를 저장하려고 하였는데, loginbutton을 클릭하면
localhost:3000/students 로 이동하지 않습니다.
state를 이용하면 Link가 잘 작동하는데, sessionStorage를 사용하면 되지 않는게 궁금했습니다.
loginbutton을 클릭한 뒤, 새로고침을 하면 localhost:3000/students로 이동합니다.

useHistory를 사용하여도 마찬가지로 작동하지 않습니다.
어떠한 대안이 있을까요?

[woohm402]

가장 유력하게 의심해볼만한 상황은 로그인되었는지 확인하는 로직이 BrowserRouter 밖에 있는 경우입니다.

Link를 통해 url을 변경했을 때, 정말 url만 변경됩니다. 그에 따라 BrowserRouter 아래에 있는 아이들은 선택적으로 mount / unmount되고, 자연히 render됩니다. 반면 콘솔 로그를 찍어보시면 아시겠지만, Route된 컴포넌트 상위 로직 (가령 App.js)은 render되지 않습니다. 때문에 로그인되었는지 확인하는 로직이 Route된 컴포넌트 상위 컴포넌트의 render 과정 혹은 useEffect 안에 있다면, render가 일어나지 않기 때문에, 해당 로직이 실행되지 않고, 결국 화면이 바뀌지 않습니다.

만약 이 내용이 원인이 아니었다면, 이건 아마 코드 구조를 좀더 많이 확인해야 알 수 있을 것 같습니다. 그런 경우 작업하고 계신 브랜치에 푸시하시면 확인해 보겠습니다!

---

때문에 일반적으로 차용하는 로직은 다음과 같습니다.

1. 로그인 판별 로직을 Route 안으로 넣기
   • 보통 HOC 를 이용해 로그인되었는지를 Route 안에서 판별
   • (이 블로그 참고)
2. 로그인 정보를 state로 관리함으로서 변경 시 상위 컴포넌트의 render가 일어나도록 함
   • 이를 위해, 로그인 정보를 state에도 (보통 최상단 index.js에 있는 Context) 저장하고 sessionStorage에도 저장합니다.
   • 하나의 데이터에 대해 두 가지 state가 존재하는 경우로 보일 수 있으나, 스토리지는 state와는 조금 다릅니다.
   • state에 비해 스토리지는 상당히 느립니다. 때문에 "로그인 / 로그아웃될 때"만 스토리지에 접근하는 게 바람직합니다.
   • 따라서 이런 구조가 나쁘다고 볼 수는 없습니다.

[yeonsumia]

지적해주신 부분이 맞네요!
첫 번째 방식은 새롭게 느껴지네요 알려주셔서 감사합니다!!