jotai 적용하기

선택

맨날 쓰는 리덕스 대신 recoil, jotai, zustand 중 하나를 쓰고 싶었다.

zustand는 리덕스와 비슷하고, recoil과 jotai는 상향식 접근 방식이라고 개념이 조금 다르다고 한다. 컴포넌트 밖에서 선언할 수 있는 영구적인 useState같은 느낌이다. 자세히 본 건 아니지만 둘 중에선 recoil 보다 jotai가 더 간단해 보인다

zustand도 사용하기 엄청 쉽다.

import create from 'zustand'

const useStore = create(set => ({
  bears: 0,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}))

function BearCounter() {
  const bears = useStore(state => state.bears)
  return <h1>{bears} around here ...</h1>
}

create 함수로 store를 만들고 상태와 상태 변경 로직들을 정의하고 useStore로 꺼내 쓰면 된다.

근데 increasePopulation 같은 로직들은 훅에서 관리하는게 나을 것 같아서 상태값만 공유하기 용이한 jotai 쓰기로 함.

사용

// atom.js
import { atom, useAtom } from 'jotai';

export const isSplashingAtom = atom(true);
export const useIsSplashingAtom = () => useAtom(isSplashingAtom);

atoms 디렉토리를 만들고 전역상태로 사용할 atom들을 정의했다. useIsSplashingAtom 처럼 래퍼 함수도 미리 만들어 두면 사용할 때 편하다. (useAtom, isSplashingAtom 따로 import 안 해도 됨)

// splash.hook.js
import { useIsSplashingAtom } from '@atoms';

function useHook() {
  const [, setIsSplashing] = useIsSplashingAtom();

  function hideSplash() {
    setIsSplashing(false);
  }
	...
}

// App.js
const App = () => {
  const [isSplashing] = useIsSplashingAtom();

  if (isSplashing) {
    return <Splash />;
  }

  return (
    <NavigationContainer>
      <HomeStackNavigation />
    </NavigationContainer>
  );
};

isSplashing 상태를 App.js 와 Splash 화면에서 공유하는데, 기존 App.js 에서 props로 내려주던 방식을 jotai atom으로 대체했다.

그냥 useState 처럼 사용하면 돼서 매우 편함. 굿