React) Recoil 사용법

 

0. 리코일 왜 사용하는건데?

-- 이 파트는 추후 정리해 보겠음

 

1. 리코일 사용법

1) RecoilRoot

- 최상위 컴포넌트를 RecoilRoot 로 감싸주면 된다.

- RecoilRoot가 감싼 하위 컴포넌트들은 이 컨텍스트를 통해 Recoil 상태와 관련된 동작을 할 수 있다. 

- Recoil 상ㅅ태가 변경될 때 하위 컴포넌트들에게 리렌더링을 트리거 한다. Recoil 상태가 변경되면 해당 상태에 의존하는 컴포넌트들은 자동으로 업데이트되어 새로운 상태를 반영한다. 

// App.tsx

import React from "react";
import { RecoilRoot } from "recoil";
import Counter from "./Counter";

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

export default App;

2) atoms

- 상태를 정의하고 유지하는데 사용되는 기본 단위이다.

- atom 은 2가지를 요구하는데 첫번째는 key로 고유한 식별자가 와야한다.

- 두번째는 default 로 초기값으로 사용된다.  지정되지 않으면 'undefined'로 초기화 된다. 

- default 로 지정된 값은 Recoil 상태가 초기화 될 때 사용된다. 

// atoms.ts

import { atom } from "recoil";

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

 

3) useRecoilState

- atom 은 useRecoilState 훅을 통해 해당 상태의 값을 읽고 업데이트 할 수 있다. 

- 아래 코드를 보면 마치 useState 사용하는 것처럼 counterState의 초기값 0이 count 가 되고 increment 버튼을 누를 때마다 count가 1씩 증가되는 것을 볼 수 있다. 

const [count, setCount] = useRecoilState(counterState);

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

const Counter = () => {
  const [count, setCount] = useRecoilState(counterState);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

4) selector

- 기존에 선언한 atom 을 전/후 처리하여 새로운 값을 리턴하거나 기존 atom 의 값을 수정하는 역할을 수행한다.

- 그리고 참조한 atom 의 값이 최신화되면 자동으로 selector의 값도 최신화 하므로 관리하기에도 간편하다.

- key :  selector의 고유한 식별자로 사용되어야한다. 다른 'atom'이나 다른 'selector' 와 구별되어야한다.

- get : get 매개변수를 통해 다른 atom 이나 selector의 값을 읽을 수 있다. get 함수는 get(state) 형태로 호출되며 state는 읽고자 하는 selector 나 atom 을 나타낸다. get 함수는 해당 상태의 최신값을 반환한다.

 

아래 코드를 보면 counterState의 최신값을 가져오는 역ㅇ할을 한다. counterState는 atom 으로 정의된 상태이며, 해당 상태의 값을 읽기위해 get 함수를 사용한다. 

//selector.ts

import { selector } from "recoil";
import { counterState } from "./atoms";

// Selector 정의
export const doubledState = selector({
  key: "doubledState",
  get: ({ get }) => {
    const count = get(counterState);
    return count * 2;
  },
});

 

5) useRecoilValue

- selector을 사용하는 컴포넌트에서는 useRecoilValue 훅을 사용하여 selector 값을 읽을 수 있다.

- 아래 코드에서 doubledState의 get 함수는 counterState의 값을 가져와서 두 배로 계산한 값을 반환한다. 이는 doubledState가 counterState에 의존하고 있음을 의미한다.

- 즉, counterState가 변경될 때마다 doubledState도 자동으로 업데이트된다.

import React from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import { counterState } from "./atoms";
import { doubledState } from "./selector";

const Counter = () => {
  const [count, setCount] = useRecoilState(counterState);
  const doubledCount = useRecoilValue(doubledState);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled Count: {doubledCount}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;