문제
회원가입 시 입력한 닉네임을 전역 상태로 관리할 경우, 로그아웃을 하거나 브라우저를 닫는 경우, 또는 다른 컴퓨터나 다른 IP 주소로 접속하는 경우에 이전 컴퓨터에서의 Recoil 상태는 유지되지 않아서, 전역 상태에 저장된 데이터가 손실되는 문제 발생
Recoil은 React의 전역 상태 관리 라이브러리로 클라이언트 측 상태 관리 도구이다. 기본적으로 브라우저 탭이나 창을 닫을 때까지만 상태를 유지된다. 그래서 사용자가 로그아웃하거나 브라우저를 닫으면 상태는 사라진다.
각 브라우저 세션은 독립적이기 때문에 다른 컴퓨터나 다른 IP 주소에서 접속하면, 이전 컴퓨터에서의 Recoil 상태는 유지되지 않는다.
시도
접근 방식을 고려해본 결과, 두 가지 방법을 시도했다.
첫째, 로컬 스토리지, 세션 스토리지 또는 서버 사이드 데이터베이스와 같은 지속적인 저장소를 사용하는 것이다. 하지만 이 방법에는 닉네임이 수정될 때마다 저장소를 업데이트해야 하며, 보안상의 이유로 민감한 정보는 저장하기 어렵다는 문제가 있다.
둘째로, 데이터 fetch 시점을 고려했다. 로그인 후 처음으로 메인 화면이 보일 때, 헤더 컴포넌트에서 이미지, 닉네임, 마일리지 정보를 서버로부터 가져오고(useEffect 사용), 이 데이터를 전역 상태로 관리하기 시작한다. 헤더는 대부분의 페이지에서 공통적으로 보이는 요소이므로, 이 방식을 사용하면 앱 전체에서 사용자 정보에 쉽게 접근하고 재사용할 수 있다.
해결
로그인 후 페이지가 렌더링되면, 헤더에서 사용자 데이터를 받아와 전역 상태로 관리함으로써 데이터 fetch 시점을 명확히 했다. 이 방법을 통해 전역 상태에 저장된 데이터가 손실되는 문제 해결!
