이슈
이번 이슈는 Axios 요청 헤더에 토큰을 설정하는 작업 중에 발생했다. 이때 사용자의 인증 토큰 정보는 Redux 스토어에 저장해서 사용하려고 했었는데 토큰을 이용한 요청을 보내기 위해서 useSelector() 훅을 사용하려 했다
문제 발생
한가지 간과한 것이 이 훅은 React 컴포넌트 내에서만 사용이 가능했기 때문에 오류가 나기 시작했다. 토큰을 사용하는 위치는 Axios 인터셉터와 같은 컴포넌트 외부였기 때문에 결과적으로 useSelector()를 사용할 수 없어 스토어 상태 조회가 불가능했다...
문제 해결
그런데 매 요청 시마다 Axios 인터셉터가 실행된다는 걸 생각해냈고 이를 활용해서 getState()를 사용하는 방향으로 결정했다.
여기서 getState()와 useSelector()은 무엇이냐?
Redux에서는 getState()와 useSelector() 둘 다 사용하면 구성 요소의 상태에 액세스할 수 있게 되지만 차이점이 있다.
useSelector()는 Redux 스토어 상태의 변경을 감지하여 컴포넌트를 리렌더링하는 반면에
getState()은 Redux 스토어의 상태의 변경을 감지하지 못하고 실행될 때의 현재 상태를 반환하는 함수이기에 보통 useSelector()를 주로 쓰게 된다.
하지만 여기서 지금 상황에 중요한 차이점이 또 있다.
useSelector()는 React 컴포넌트 내에서만 사용 가능하며, getState()은 React의 렌더링 사이클에 영향을 받지 않고 언제든지 호출할 수 있다.
컴포넌트 외부에서 스토어 상태를 조회해야하는 지금의 경우는 인터셉터가 요청을 처리하기 전에 실행되기 때문에 큰 문제 없이 항상 최신의 상태를 가지고 있기에 아주 적합했다.
따라서, 혹여나 로그인 과정에서 토큰이 변경되더라도 그 변경 사항이 Axios 요청에 반영되어 인증 실패 문제를 해결할 수 있게 된다.
이 경험을 통해 getState()와 useSelector()의 차이점을 이해하게 되었고,
항상 좋은 것은 없고 상황에 맞는 적절한 걸 선택하는 것이 중요하다는 걸 다시 한 번 깨달았다...!
틀린 내용이나 더 좋은 방법이 있다면 피드백 부탁드립니다. 🙇♂️
