recoil 개념 정리(리액트 리코일: 상태 관리의 새로운 효율성)

Atom: 상태의 기본 단위
리액트 리코일에서는 Atom이라는 개념이 핵심입니다. 각 Atom은 고유한 키와 초기값을 가지고 있어 해당 키를 통해 상태에 접근할 수 있다. 아래는 간단한 Atom의 예시다.

 

import { atom } from 'recoil';

export const myState = atom({
  key: 'myState', // 고유한 키
  default: '', // 초기값
});

 

Selector: 파생된 상태 계산
Selector는 Atom에서 파생된 값을 계산하거나 다른 Selector에서 파생된 값을 계산하는 데 사용된다. 이를 통해 복잡한 상태 로직을 간단하게 처리할 수 있다.

import { selector } from 'recoil';
import { myState } from './atoms';

export const myDerivedState = selector({
  key: 'myDerivedState',
  get: ({ get }) => {
    const originalState = get(myState);
    // 상태에 대한 계산 로직
    return transform(originalState);
  },
});

 

RecoilRoot: 전역 상태 관리
RecoilRoot은 Recoil 애플리케이션의 상태를 관리하기 위한 컨테이너 역할을 한다. 애플리케이션 최상위 컴포넌트에서 RecoilRoot을 사용하여 전역 상태를 관리한다.

import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      {/* 애플리케이션 컴포넌트들 */}
    </RecoilRoot>
  );
}

 

사용 예시: 간편한 상태 관리

import { useRecoilState, useRecoilValue } from 'recoil';
import { myState, myDerivedState } from './atoms';

function MyComponent() {
  const [state, setState] = useRecoilState(myState);
  const derivedState = useRecoilValue(myDerivedState);

  const handleChange = (e) => {
    setState(e.target.value);
  };

  return (
    <div>
      <input type="text" value={state} onChange={handleChange} />
      <p>Derived State: {derivedState}</p>
    </div>
  );
}

 

이렇게 리액트 리코일을 사용하면 복잡한 상태 관리도 간편하게 처리할 수 있다.

 

공식 문서: https://recoiljs.org/