recoil을 통한 전역상태관리

웹 SNS가 접목된 음악 플레이어를 만드는 프로젝트 진행 중 팔로우 기능을 구현하는 과정에서 곡이나 플레이리스트를 클릭 시 그 곡이나 플레이리스트의 상세페이지로 이동을 시킨 후 거기에서 곡 업로드한 유저의 이름을 클릭 시 그 유저의 상세페이지로 이동을 시켜서 팔로우를 할 수 있게끔 구현을 해놓았다. 처음 문제는 업로드 된 음악의 데이터를 받아서 그 곳에서 songUpload값을 추출해서 써야하는 과정이었다.

우선 음악의 상세페이지의 데이터를 받아서 유저의 상세페이지에서 사용하는데 자꾸 데이터를 받아오지 못하는 현상이 나타났다. 

그 후 생각한게 recoil을 사용하여서 음악의 상세페이지에서 song.songUploder부분을 추출해서 전역상태로 관리하는 방법이었다. 

export const songUploaderState = atom<UserInfo | null>({
  key: 'songUploaderState',
  default: null,
});

이렇게 state를 만든 후 

//SongDetailComponent.tsx

const [songUploader, setSongUploader] = useRecoilState(songUploaderState);

  useEffect(() => {
    if (data?.song?.songUploader) {
      setSongUploader(data.song.songUploader);
    }
  }, [data, setSongUploader]);

음악 쪽에서의 코드를 작성했다.

정말 간절히 기도를 하며 업로드 유저의 이름을 클릭하는 순간 드디어 렌더링이 되었다. 그리고 URL에 param으로 userId값을 받아서 그 userId값으로 팔로우 기능을 구현하였다.

문제가 다시 또 추가되었다. 바로 recoil을 사용했을 때 새로고침시 데이터 유지가 안된다는 것... 이를 해결하기 위해 라이브러리의 손을 빌렸다. 

yarn add recoil-persist

recoil-persist를 client쪽 package에 설치를 해주었다.

import { recoilPersist } from 'recoil-persist';
const { persistAtom } = recoilPersist();

export const songUploaderState = atom<UserInfo | null>({
  key: 'songUploaderState',
  default: null,
  effects_UNSTABLE: [persistAtom],
});

그 후 import를 한 후 코드에 추가해주었고 새로고침을 한 후에도 데이터가 잘 유지되는 것을 볼 수 있었다.