[TIL] Recoil

 

 

Recoil 설치

npm install recoil

 

Recoil 애플리케이션 설정

Recoil을 사용하려면 애플리케이션에서 RecoilRoot를 설정해야한다.

src/App.js 

import React from 'react';
import { RecoilRoot } from 'recoil';
import YourMainComponent from './YourMainComponent';

function App() {
	return (
    	<RecoilRoot>
        	<YourMainComponent />
        </RecoilRoot> );
}

export default App;

 

 

Recoil 상태 생성

Recoil 상태를 생성하고 초기값을 설정하기

src/atoms/counterAtom.js

import { atom } from 'recoil';

export const counterState = atom({
  key: 'counterState',
  default: 0,
});

 

 

 

Recoil 상태 사용

생성한 Recoil 상태를 컴포넌트에서 사용하는 방법

src/components/CounterComponent.js

import React from 'react';
import { useRecoilState } from 'recoil';
import { counterState } from '../atoms/counterAtom';

function CounterComponent() {
  const [counter, setCounter] = useRecoilState(counterState);

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => setCounter(counter + 1)}>Increment</button>
    </div>
  );
}

export default CounterComponent;

 

 

 

 

Recoil 상태 갱신 ( useRecoilState )

Recoil 상태를 갱신하는 방법은 useRecoilState 훅으로 상태를 읽고 쓸 수 있다.

상태를 변경하는 함수를 이용하여 Recoil 상태를 갱신하면, Recoil은 해당 변경 사항을 감지하고 자동으로 리렌더링한다.

src/components/CounterComponent.js

import React from 'react';
import { useRecoilState } from 'recoil';
import { counterState } from '../atoms/counterAtom';

function CounterComponent() {
  const [counter, setCounter] = useRecoilState(counterState);

  const handleIncrement = () => {
    setCounter(counter + 1);
  };

  const handleDecrement = () => {
    setCounter(counter - 1);
  };

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default CounterComponent;

 

 

 

Recoil 상태 조합 ( useRecoilValue )

여러 Recoil 상태를 조합하는 방법은 useRecoilValue 훅으로 여러 상태를 읽어와 조합할 수 있다.

src/atoms/combinedAtoms.js

import { atom, useRecoilValue } from 'recoil';
import { counterState } from './counterAtom';

export const combinedAtom = atom({
  key: 'combinedState',
  default: null,
});

export const CombinedComponent = () => {
  const counter = useRecoilValue(counterState);
  // 추가적인 Recoil 상태들을 읽어와 조합....

  return <div>Combined State: {counter}</div>;
};

 

 

 

 

 

Recoil 상태의 비동기 처리 ( useRecoilCallback )

공식문서 : https://recoiljs.org/docs/api-reference/core/useRecoilCallback/

useRecoilCallback을 사용하여 비동기 작업처리하기

src/atoms/asyncAtom.js

import { atom, useRecoilCallback } from 'recoil';

export const asyncAtom = atom({
  key: 'asyncState',
  default: null,
});

export const AsyncComponent = () => {
  const fetchData = useRecoilCallback(async ({ snapshot }) => {
    const currentState = await snapshot.getPromise(asyncAtom);

    // 비동기 작업 수행 후 Recoil 상태 업데이트
    // snapshot.set(...) 또는 setAsyncAtom(...) 등을 사용
  });

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
    </div>
  );
};

- snapshot

useRecoilCallback 훅에서의 snapshot은 현재 Recoil 상태의 "스냅샷"으로, 현재 시점의 recoil 상태를 읽을 수 있도록 해준다

useRecoilCallback은 비동기 함수를 생성하는 데 사용되는데 이 함수는 snapshot 매개변수를 받는다.

snapshot을 이용하면 비동기 함수 안에서 현재 Recoil 상태를 안전하게 읽을 수 있다.

import { useRecoilCallback } from 'recoil';
import { myAtom } from './atoms';

const myAsyncSelectorCallback = useRecoilCallback(async ({ snapshot }) => {
  const currentValue = snapshot.getLoadable(myAtom).value;

  // currentValue를 사용한 비동기 작업 수행
  const result = await someAsyncFunction(currentValue);

  // 결과를 Recoil 상태에 반영
  snapshot.set(myAtom, result);
});

// myAsyncSelectorCallback을 이용하여 비동기 작업 수행
myAsyncSelectorCallback();

 

snapshot.getLoadable(myAtom).value를 사용하여 현재 myAtom의 값을 읽어오고, 그 값을 이용하여 비동기 작업을 수행한 후 snapshot.set(myAtom, result)을 통해 Recoil 상태를 업데이트할 수 있다.

이를 활용하여 비동기 작업을 수행하고 Recoil 상태를 갱신할 수 있다.