react에서 recoil을 이용한 상태관리

전역 상태 관리

프론트앤드 개발을 하다보면 전역 상태관리를 해야하는 순간이 온다. 내가 이번 프로젝트에서 경험해 본 전역 상태관리 라이브러리는 recoil이다. 전역 상태 관리의 필요성은 예를 들면 naver 사이트를 이용하는데 내가 뉴스, 증권, 날씨 등 다른 메뉴에 들어가게 되면 다른 화면이 나오게 되고 그때마다 필요한 정보들은 다름으로 각각의 페이지에서 관리할 것이다. 하지만 항상 알고 있어야 할 정보가 있다면 어떻게 해야 할까?? 그때마다 props로 값을 넘겨주기보다는 중앙에 창고 같은 것이 있다면 그곳에 넣어두고 모든 페이지들이 그 창고에 있는 값을 참조하면 좋을 것이다. 그 기능을 하는 것이 전역 상태 관리이다.

위 사진은 나의 프로젝트에서 이름을 사용하는 예시이다. 이름은 전역으로 상태관리 되고있고 해당 변수를 받아와 화면에 이름을 띄워야 한다.

//state.user.ts user의 이름을 관리하는 파일이다
import { atom } from 'recoil';

export const USER_KEY = 'user';
export const DEFAULT_USER_NAME = '홍길동';

export type UserState = {
  name: string;
};
export const userState = atom<UserState>({
  key: USER_KEY,
  default: {
    name: DEFAULT_USER_NAME,
  },
});

위의 코드로 관리되는 이름이므로 지금은 default 값으로 되어있지만 프로필 변경하는 페이지에서 이름을 바꾸게 된다. 이름을 변경하는 페이지에서 이름을 바꾸면 백엔드에 name을 올리고 프론트에서 다시 이름을 받아와 해당 이름을 전역으로 관리하여 모든 페이지에서 이름이 들어가는 위치에 수정한 이름으로 이름이 바뀌게 된다.

예를 들면 이후 어딘가에 이런 식의 코드가 있으면 recoil로 관리중인 이름을 바꿀 수 있다.

import { useRecoilState } from 'recoil';

const [username, setUsername] = useRecoilState(userState);

...

setUsername("원하는 이름")

이런 식으로 코드를 작성하면 username 이 setUsername에 의하여 내가 원하는 이름으로 바뀌게 된다. 뭐 이거밖에 없어??라고 할 수 있지만 이게 전부이다... 바뀐 username이 이제 userState에 굴러 들어가서 name이 되는 거다!