[React] Recoil 로 변경하기 어려운 상태 관리 방법

발단

  백오피스 페이지를 구현하고 있는데, 한가지 문제가 생겼다.

  인증요청을 보냈을 때 정상적이면 인가되어 api를 사용할 수 있지만, 정상적이지 않으면 인가에 실패하기 때문에 401을 반환한다. 이 때 Axios에서 인터셉트해서 401에러를 확인했을 때 다른 동작 없이 바로 로그아웃을 시켜서 로그인페이지로 리다이렉트하길 원했다. 

 

  현재 상태관리 라이브러리로 Recoil을 사용하고 있는데, 로그인시 특정 정보를 recoil을 통해 저장해서 사용하고 있다. 그리고 해당 정보가 없으면 바로 로그아웃시켜서 로그인페이지로 리다이렉트하도록 구현했는데, 위에서 언급한 내용은 약간 다르다. 

 

  저장된 로그인한 사용자의 정보를 확인하고 없으면 로그아웃시키지만 이 것은 컴포넌트단계에서 이루어진다. 즉, 클라이언트의 동작으로 인해 로그아웃되는 것이다. 서버에서 보내주는 401도 그대로 컴포넌트까지 넘어와서 로그아웃을 시켜주면 가능하지만, 내가 원한 것은 그 전에 응답을 받자마자 로그아웃처리를 하는 것이다. 

 

  그래서 axios에서 응답을 받자마자 응답값에 401이 확인되면 useResetRecoilState('user')를 통해 user의 상태를 지워줬더니 오류가 생겼다. 

  리액트의 라이프사이클 상 컴포넌트에서 사용해야 할 기능을 그 전에 api를 호출하자마자 사용해서 에러가 난 것이다. 그리고 내가 원하는 근본적인 해결은 로그아웃이 작동하도록 user의 상태를 지워주는 것이다. 

 

해결과정

 

  user의 상태를 지우기 위해 useResetRecoilState()를 사용했으나 위에서 언급한 것처럼 실패했다. 그리고 ResetRecoil기능을 통해 user의 상태를 지워주려면 컴포넌트에서 사용할 수 있겠지만 그것이 늘 정답은 아니고, 라이브러리를 사용하는 것일 뿐이다. 

  결론적으로 상태를 지운다는 것은 현재 Recoil을 localStorage에 저장해서 사용하고 있기 때문에 굳이 useResetRecoilState()를 사용하지 않아도 LocalStorage를 직접 수정하면 된다. 

 

const user = { nickname: null, role: null };
localStorage.setItem('recoil persist name', JSON.stringify({ user }));

 

근본적인 문제 해결을 위해서는 nickname, role을 null로 바꿔주는 것이였고, Recoi에서 쓰는 그대로 user를 직렬화하여 덮어주면 된다. 

 

코멘트

  어쩌면 사소한 내용이지만 라이브러리에 매몰되지 않고 문제를 해결하려고 시도하는 점에서 나름 성장하고 있음을 느낀다.