React) Recoil - 페이지 이동 시 비동기 데이터를 state로 넘긴 후 redirect될때 state값이 사라져서 발생하는 에러 해결 (selectorFamily) <TIL_2022_07_27>

특정 유저에게 아래와 같이 질문 내용을 전달하는 기능을 구현하고자 하였다.

 

서버로 POST 요청을 보냈더니 아래와 같은 에러가 뜬다

 

POST 요청은 정상적으로 처리되었다. 그렇다면 프론트엔드 코드의 문제인데,

 

콘솔창을 뜯어본 결과 POST 요청 후 리디렉팅될때 이전 라우팅 경로에서 전달 받은 state 값이 사라지는 현상이 발생해서 에러가 뜬 것이었다.

 

해결방안

Recoil을 사용하여 비동기로 받아온 유저 정보를 전역상태로 관리하는 방법으로 해결.

 

API에 파라미터를 전달할 필요가 없는 경우 다음과 같이 selector를 사용하여 비동기 데이터를 전역상태로 관리하고 사용하였다.

// atoms.js
export const userInfoSelector = selector({
  key: "userInfoSelector",
  get: async () => {
    return await axios.get(`${BASE_URL}/user`);
  },
});

// Mypage.jsx
const user = useRecoilValue(userInfoSelector).data;

 

하지만 본 기능 구현의 경우 API에 userId라는 파라미터를 전달해야 한다.

파라미터를 전달해야 할 때는 다음과 같이 selectorFamily를 쓴다.

// atoms.js
export const getUserInfoSelector = selectorFamily({
  key: "getUserInfoSelector",
  get: (userId) => async () => {
    return await axios.get(`${BASE_URL}/user/${userId}`);
  },
});

// AskQuestion.jsx
...
const params = useParams();
const userId = params.id;

const user = useRecoilValue(getUserInfoSelector(userId)).data;

 

 

생각보다 간단했지만, selector, selectorFamily에 대해서는 추가적인 공부가 필요해 보인다.

또 지금은 recoil 함수들을 다 atoms.js에 작성했는데, recoil 관련 디렉토리 구조를 어떻게 짤지도 고민해봐야 겠다.