Recoil

지난 프로젝트에서는 전역 상태 관리 (로딩 상태, 장바구니 구현) 에 Redux를 사용했다.

component에서 주고받는 값들이 많아지고 복잡해질수록, 전역에서 상태를 관리하고 필요할 때마다 가져다 쓰는 것이 좋은데

Redux 라는 라이브러리를 더 적극적으로 사용했다면 지난 프로젝트 코드에 많은 개선이 이루어졌을 것 같다

 

지난 프로젝트 프론트 코드 보러 가기

https://github.com/dazz6zip/ss-react

 

npm i recoil

 

이번에는 Redux가 아닌 Recoil을 사용해 볼 것이다.

Recoil은 Facebook(meta)에서 발표한 React의 상태 관리 라이브러리이다.

특징	Redux	Recoil
중심 개념	Flux 아키텍처를 기반으로 전역 상태 관리	React와 밀접한 통합, 컴포넌트 단위의 상태 관리
구조	전역 스토어를 중심으로 상태를 액션과 리듀서를 통해 변경	여러 개의 독립적인 atom(상태 단위)으로 상태를 관리
React 독립성	React와 독립적 (Redux는 다른 프레임워크에서도 사용 가능)	React 전용 라이브러리

추가적으로 Redux는 단일 전역 스토어를 제공하고, Recoil은 여러 개의 독립적인 atom으로 분리되어 상태를 저장한다.

Recoil이 (비교적)설치와 설정, 학습까지 간단하다.

 

/* index.tsx */
root.render(
<RecoilRoot>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
</RecoilRoot>
);
// render 최상위에 <RecoilRoot>로 감싸 준다

/* atoms.ts */
import { atom } from "recoil";

// 특정 상태 지정
export const isDarkAtom = atom({
  key: "isDark", // 고유한 값
  default: true, // 기본값
});

/* 필요한 곳에서 */
import { useRecoilValue } from "recoil";
import { isDarkAtom } from "./atoms";

// 값 가져오기
const isDark = useRecoilValue(isDarkAtom);

// 값 수정하기
const setterFn = useSetRecoilState(isDarkAtom);
(...)
<button onClick={() => setterFn((pre) => !pre)}>

처음 이해하는 데 헷갈렸던 개념이 있어서 정리해 본다.

 

isDarkAtom은 atom이라는 상태 단위다. 현재 전역으로 isDarkAtom라는 상태가 선언된 것이지, const라고 해서 일반 전역 상수로 사용되는 것이 아니다!

useSetRecoilState에 atom을 넣으면, 해당 atom의 setter 함수를 반환한다.

useSetRecoilState를 사용해서 setter 함수를 만들고, 이 함수를 활용해서 상태값을 수정할 수 있으며 위 예시는 button을 클릭하면 값이 전환될 수 있도록 onClick 이벤트에 사용한 것이다.

setterFn{(기존값) => !(기존값)} 의 형식, 그러니까 기존값을 기존값에 반대되는 값으로 설정하는 toggle로 구현된 것이다.