내가 보려고 적는 Recoil

Recoil은 React 애플리케이션에서 상태 관리를 도와주는 라이브러리입니다. React의 상태 관리 도구인 Context API나 Redux와 비교해 가벼우면서도 효율적이라는 장점이 있습니다.
Recoil을 사용하면 전역 상태 관리와 상태의 구독 및 업데이트가 쉬워지고, React의 컴포넌트 기반 설계와 자연스럽게 통합됩니다.

---

Recoil의 주요 개념

1. Atom

• 상태의 최소 단위로, 전역 상태 값입니다.
• atom() 함수를 사용하여 생성하며, 컴포넌트 간에 공유됩니다.
• Atom에 변경 사항이 생기면 이를 사용하는 모든 컴포넌트가 자동으로 리렌더링됩니다.

2. Selector

• 파생 상태(derived state)를 생성하는 데 사용됩니다.
• selector() 함수로 정의하며, 하나 이상의 Atom 또는 다른 Selector를 기반으로 상태를 계산합니다.
• 비동기 데이터 처리나 파생 데이터 계산에 유용합니다.

---

Recoil Hooks

Recoil에서는 상태 관리를 위해 아래의 세 가지 주요 훅을 사용합니다.

1.useRecoilValue()

• Atom이나 Selector의 값을 읽을 때 사용합니다.
• 상태 값을 읽기만 하고, 업데이트는 하지 않을 경우 적합합니다.

  import { useSetRecoilState } from 'recoil';
  import { countState } from './states';
  function CounterButton() {
    const count = useRecoilValue(countState); //상태 값을 읽기만 함
    return <div>Count: {count} </div>;
    }

2. useSetRecoilState()

• Atom 값을 업데이트할 때 사용합니다.
• 읽기는 하지 않고, 상태 업데이트만 집중할 경우 적합합니다.

  import { useSetRecoilState } from 'recoil';
  import { countState } from './states';
  function CounterButton() {
  const setCount = useSetRecoilState(countState); // 상태 업데이트 전용
  return <button onClick={() => setCount(prev => prev + 1)}>Increment</button>;
  }

3. useRecoilState()

• Atom 상태를 읽고 쓰기 모두 할 수 있도록 합니다.
• 값을 읽고, 동시에 업데이트도 필요한 경우 사용합니다.

import { useRecoilState } from 'recoil';
import { countState } from './states';
function Counter () {
    const [count, setCount] = useRecoilState(countState); // 상태 읽기와 업데이트
    return (
        <div>
            <p> Count: {count} </p>
            <button onClick={() => setCount(prev => prev +1 }> Increment </button>
        </div>
    )
}

---

Atom 생성 예제

atom()을 사용하여 상태를 정의합니다.

import { atom } from 'recoil';
export const countState = atom({
    key: 'countState', // 고유한 ID (필수)
    default: 0,            //초기값
});

---

Selector 생성 예제

selector() 를 사용하여 파생 상태를 정의합니다.

import { selector } from 'recoil';
import { countState } from './states';
export const doubledCountState = selector({
  key: 'doubledCountState',
  get: ({ get }) => {
    const count = get(countState); // countState의 값을 읽음
    return count * 2; // 두 배로 계산
  },
});

아직 Selector는 안 써봐서 잘 모르겠다..