상태란?

상태(state)는 애플리케이션의 작동 방식을 설명하는 모든 데이터를 말한다. 상태 관리는 시간의 흐름에 따라 상태가 변경되는 방식이다.

상태 관리를 위해서는 다음 기능이 필요하다!

  • 초기값(initial Value)을 저장할 수 있어야 한다.
  • 현재 값(Current Value)을 읽을 수 있어야 한다.
  • 값을 업데이트 할 수 있어야 한다.

React 상태관리의 한계

  1. 컴포넌트 상태는 연관된 상위 컴포넌트까지 끌어올려야 공유가 가능하고 이 과정에서 Props Drilling 이슈가 발생하고 불필요한 리렌더링 발생한다. (성능저하)

  2. Context로 Props Drilling 이슈 해결할 수 있지만, Context는 단일 값만 저장할 수 있고 여러 값들의 집합을 담기가 어렵다.

  3. React의 Context, Props 만으로는 최상단에서 최하단 까지의 state 코드 분리가 어렵다.

Recoil 장점

유연한 상태 공유

Redux처럼 복잡한 과정이 없다. 간단한 get/set 인터페이스를 사용해 상태 공유가 쉽다.

파생된 상태

데이터는 간단하고 또 안전하게 상태나 다른 파생된 데이터로부터 파생될 수 있다. 또한, 상태에 접근하는 방법과 동일하게 파생된 상태에 접근 가능하다.

파생된 상태는 동기, 비동기 처리가 가능하다.

광범위한 앱 상태 관찰

Recoil 상태의 전체 또는 일부의 상태를 읽거나 상태가 변경된 것을 감지할 수 있다. 앱의 상태를 유지할 수도 있고 다시 수화(Hydration)하는 기능을 제공한다.

비교적 낮은 러닝 커브

Recoil은 React API와 유사하여 Redux에 비해 쉽고 Recoil은 기본적으로 비동기 처리 기능을 가진다.

Recoil 핵심 개념

1. atoms

  • atoms은 공유 상태
  • 컴포넌트가 구독할 수 있는 상태 단위

atom은 상태단위이며 구독과 업데이트가 가능하다. atom이 업데이트되면 구독중인 컴포넌트는 새 값을 반영해 다시 렌더링된다.

1
2
3
4
const authUserState = atom({
  key: "authUserState",
  defualt: null,
});
  • atom은 고유한 key를 가져야 한다.
  • default 속성으로 초깃값 설정한다.

컴포넌트에서 atom을 읽거나 쓰려면 useRecoilState 훅을 사용한다.

1
2
3
4
5
6
7
function SignIn() {
  const [authUser] = useRecoilState(authUserState);

  return (
    !authUser ? <SignInForm /> : <Browse />;
  );
}

뿐만 아니라 상태 업데이트를 위한 업데이트 함수만 추출할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function SignInButton() {
  const [, setAuthUser] = useRecoilState(authUserState);

  const handleSignIn = () => {
    // ...
    setAuthUser({ name, email });
  };

  return (
    <button type="button" onClick={handleSignIn}>
      로그인
    </button>
  );
}

2. selectors

selector는 atom이나 다른 selector를 입력받아 파생된 상태를 생성하는 순수함수이다. 상위의 atom, selector가 업데이트되면 하위의 selector도 다시 실행된다. 컴포넌트는 atom과 마찬가지로 selector가 변경되면 다시 렌더링된다.

최소한의 상태만 atom에 저장하고 selector로 파생된 상태를 효과적으로 계산하여 불필요한 상태 보존을 방지한다.

selector는 어떤 컴포넌트가 필요로하는지, 어떤 상태에 의존하는지 추적하므로 함수적인 접근 방식을 매우 효율적으로 만든다.

1
2
3
4
5
6
7
const authUserNameState = selector({
  key: "authUserNameState",
  get:({ get }) {
    const authUser = get(authUserState);
    return authUser.name;
  },
});
  • get 메서드 내부의 get함수는 atom 또는 다른 selector를 전달받을 수 있다.
  • 전달받게 되면 자동적으로 종속 관계가 생성되며 참조했던 다른 atom, selector가 업데이트 되면 다시 실행된다.