[React Recoil] 리액트 Recoil 세팅 및 사용하기(상태 관리 라이브러리)

안녕하세요! 프뚜입니다.

 

Atoms과 Seelctor를 통해 상태 관리 및 사용할 수 있는 Recoil에 대해 포스팅합니다.

 

[Atomes]

- 전역으로 읽고 쓸 수 있습니다. 
- 상태의 단위이며 업데이트와 구독이 가능합니다.
- 상태가 업데이트되면 구독된 컴포넌트는 새로운 값을 가지고 재렌더링됩니다.

 

[Seelctor]

- 전역으로 읽고 쓸 수 있습니다. 
- Selector는 Atoms에서 파생된 상태의 일부이며, 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물입니다.
- Atoms 또는 Selectors가 업데이트 된다면 하위 selector 함수도 재실행(재랜더링)됩니다.

---

[개발 환경]

- OS: Windows 10 64Bit

- React: 18.2.0

---

# Recoil 설치하기

# 2023.02.03[프뚜]: npm
npm install recoil

# 2023.02.03[프뚜]: yarn
yarn add recoil

---

# recoil.js 파일 생성하기

import { atom } from 'recoil';

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

number를 관리하는 전역 상태 값을 선언합니다. key와 default가 한 쌍으로 되어있습니다.

---

# atom으로 선언된 전역 number 출력하기

import { useRecoilState } from 'recoil';
import { number } from '../../recoil/recoil';

const Main = () => {
  // 2023.02.03[프뚜]: useRecoilState을 통해 recoil.js에 있는 number(atom) state를 바인딩 
  const [count, setCount] = useRecoilState(number);
  return (
    <>
      <button
        onClick={() => {
          setCount(count + 1);
        }}>
        button
      </button>
      {count}
    </>
  );
};

export default Main;

[useRecoilState]
- atom의 상태를 구독합니다.
- useState(hook) 같이 배열의 첫번째 파라미터로 상태, 두번째 파라미터로 상태에 대한 setter 함수를 반환합니다.

 

[useRecoilValue]
- setter 함수 없이 atom의 상태만 반환합니다.

 

[useSetRecoilState]
- atom 상태 없이 setter 함수만 반환합니다.

 

[useResetRecoilState]
- atom 상태를 default 상태로 초기화(Reset)합니다.

---

# selector 선언하기

 

import {atom, selector} from 'recoil';

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

export const doubleNumber = selector({
  key: 'doubleNumber',
  get: ({ get }) => {
    return get(number) * 2;
  }
});

number(atom)을 구독하고, 해당 값에 * 2를 하는 selector를 생성합니다.

---

# selector로 선언된 전역 doubleNumber 출력하기

 

import { useRecoilState, useRecoilValue } from 'recoil';
import { doubleNumber, number } from '../../recoil/store';

const Main = () => {
  // 2023.02.03[프뚜]: useRecoilState을 통해 recoil.js에 있는 number(atom) state를 바인딩
  const [count, setCount] = useRecoilState(number);

  // 2023.02.03[프뚜]: number(atom)을 구독하고 있는 selector
  const doubleCount = useRecoilValue(doubleNumber);
  return (
    <>
      <button
        onClick={() => {
          setCount(count + 1);
        }}>
        button
      </button>
      {count}
      {doubleCount}
    </>
  );
};

export default Main;

구독하고 있는 atom의 값이 변경될 때, selector도 변경됩니다.

---

https://github.com/JeongSeongSoo/tistory-react.git

JeongSeongSoo/tistory-react