[React] 주스탄드(zustand)로 회원정보 상태 관리하기(Session Storage)

문제 상황 프로젝트를 하는 중 회원의 프로필 카드를 어느 페이지를 가던지 띄우기로 했는데 그 프로필 카드에 출력되는 회원의 정보를 페이지 이동, 새로고침 때마다 사용자 정보를 불러오는 api를 호출해 받아와서 출력해주는 방법에 대해서 생각해보았다. 그런데 이 방법은 마치 JWT Token을 페이지에 해당하는 상태로 저장하고 이동할 때마다 refresh token으로 access token을 재발급 받아 페이지 별, 컴포넌트 별 상태로 저장하는 급의 비효율, api 호출 낭비, 사용자 경험의 수준 하락을 초래할 것이라 생각이 들었다.

아이디어 그래서 생각한 것은 바로 JWT처럼 주스탄드로 로그인 시에 jwt 받아서 세션 저장하는 김에 같이 전역상태로 사용자의 정보를 저장하는 것이었다. 이렇게 한다면 사용자의 정보가 필요한 페이지든 컴포넌트에서 별도의 api 호출도 없고 세션 스토리지에 저장해두는 것이기에 읽기가 훨씬 빠르다.

구현 처음에 구글에 쳐도 코드가 거의 없어서 혼자 낑낑대다가...

요청 처리 중입니다...

[React] 주스탄드(zustand)로 회원정보 상태 관리하기(Session Storage)

등록된 다른 글