<React Recoil> - 리액트 상태관리 리코일 / atoms,hooks

728x90

반응형

---

리코일 이미지

---

 

 

리코일(Recoil) ?

 

리코일은 2020년 Facebook 에서 만든 React 전용 상태 관리 라이브러리 이다. 이전에는 redux, mobx 그리고 React에 context등 다양한 상태관리 툴들이 존재한다. 

기존 프로젝트도 redux로 되어있었고 처음 접했을 때는 많은 양에 코드들이 이해를 하는데 어려움을 주었지만 recoil은 이전 상태관리 라이브러리들과 다르게 러닝커브가 높지 않아 편하게 접근했던 거 같다.

 

• 리코일은 리액트 문법 친화적이며 get/set 인터페이스로 사용가능한 보일러 플레이트가 없는 API를 사용한다.
• 미들웨어 없이 비동기 처리가 가능하다
• 리코일 내부적으로 캐싱을 지원하며 동일한 atom 값에 대한 메모제이션된 값을 사용하여 성능적 이점이 있다.
• 간단하고 직관적인 API를 사용한다
• React 동시성 모드, Suspense 등을 지원

 

 

---

 

설치

npm install recoil

또는 yarn을 사용한다면 이 명령어를 사용하면 된다.

yarn add recoil

 

 

---

 

사용

 

리코일 프로바이더 설정: 애플리케이션의 최상위 컴포넌트에 <RecoilRoot> 컴포넌트를 추가하여 상태를 관리한다.

import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      {/* 애플리케이션 내용 */}
    </RecoilRoot>
  );
}

 

상태 정의: atom 및 selector를 사용하여 상태를 정의.

import { atom, selector } from 'recoil';

// 원자 상태(atom) 정의
export const countState = atom({
  key: 'countState',
  default: 0,
});

// 셀렉터(selector) 정의
export const doubledCount = selector({
  key: 'doubledCount',
  get: ({ get }) => {
    const count = get(countState);
    return count * 2;
  },
});

 

상태 사용: 컴포넌트 내에서 useRecoilState 또는 useRecoilValue 훅을 사용하여 상태를 읽거나 업데이트.

import { useRecoilState, useRecoilValue } from 'recoil';
import { countState, doubledCount } from './state';

function Counter() {
  const [count, setCount] = useRecoilState(countState);
  const doubled = useRecoilValue(doubledCount);

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

  return (
    <div>
      <p>Count: {count}</p>
      <p>Doubled Count: {doubled}</p>
      <button onClick={handleIncrement}>Increment Count</button>
    </div>
  );
}

 

 

---

 

Atoms

 

• Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다.
• atom이 업데이트되면 각각 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다.
• atoms는 런타임에서 생성될 수도 있다.
• Atoms는 React의 로컬 컴포넌트의 상태 대신 사용할 수 있다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다.
• 모든 아톰은 전역적으로 고유의 키값을 가져야 하고, 이 키값을 가지고 컴포넌트에서 useRecoilState로 불러올 수 있다.

 

export const recoilAtomState = atom<string[]>({
  key: 'recoilAtoms',
  default: [],
})

• key : 고유한 key 값 (보통 해당 atom을 생성하는 변수 명으로 지정)
• default : atom 의 초기값을 정의한다..

※ key 는 중복 되지 않게 설정해야 한다.

 

---

 

Hooks

 

useRecoilState(state)

컴포넌트에서 상태를 읽고 쓰기 위한 훅

 

이 hook은 암묵적으로 주어진 상태에 컴포넌트를 구독한다.

const [state, setState] = useRecoilState(recoilAtomState);

 

리액트의 useState와 비슷하게 첫 번째 요소는 상태의 값이며 두 번째 요소는 업데이트를 위한 setter 함수인 튜플을 리턴한다.

React 컴포넌트에서 사용하면 상태가 업데이트되었을 때 리렌더링을 하도록 컴포넌트를 구독한다.

 

 

---

 

useRecoilValue(state)

주어진 recoil 상태를 읽기 위한 훅

 

const state = useRecoilValue(recoilAtomState);

쓰기가 필요 없고 상태를 읽기만 필요한 경우 useRecoilValue로 상태에 값만 가져와서 사용할 수 있다.

 

---

 

useSetRecoilState(state)

recoil 상태의 값을 업데이트하기 위한 setter 함수를 리턴

 

const setState = useSetRecoilState(recoilAtomState);

useRecoilValue 와 반대로 상태의 값이 필요 없고 업데이트만 필요한 경우 사용할 수 있다

 

---

 

useResetRecoilState(state)

recoil 상태의 값을 default 값으로 리셋하는 함수를 반환

 

const resetState = useResetRecoilState(recoilAtomState);

<button onClick={resetState}>Reset</button>
// 클릭시 해당 상태 리셋

recoil 상태의 값을 default 값으로 초기화시킬 수 있는 함수를 반환하다. 

 

 

 

---

https://covelope.tistory.com/

Ch.Covelope

 

 

참고

 

https://recoiljs.org/ko/

Recoil

---