[React] Recoil

전역 상태 관리위한 라이브러리로, React 상태를 쉽게 관리하고 효율적으로 업데이트함

 

my. context랑 뭐가 다르지,,?

	Recoil	Context
목적	상태 관리 (비동기,상태독립 등 유용)	데이터 전달
렌더링	변경 시 구독한 컴포넌트만 리렌더링	변경 시 구독하는 모든 컴포넌트 리렌더링
비동기 상태	selector에서 비동기 로직 처리 가능	추가 훅,로직 필요

 

Atom

---

Recoil의 전역 상태 관리 단위로 상태 정의( ≒ 전역 사용 가능한 State)

import { atom } from 'recoil';

export const numState = atom<Type?>({
  key: 'numState',    // 전역에서 고유해야 함
  default: 0,         // 초기값
});

Atom 생성 시 고유한 key와 초기값(default) 설정 필요.

(객체, 배열일땐 타입 지정해주자)

 

 

Selector

---

Atom이나 다른 Selector에서 파생된 값을 계산하는 데 사용

비동기 처리, 비즈니스 로직이나 파생된 상태를 표현할 때 유용

 

GET Selector

---

다른 atom,selector의 값 읽기만 (상태 변형x)

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

export const doubleState = selector({
  key: 'doubleState',
  get: ({ get }) => { 
    const count = get(numState); //상태 읽기만
    return count * 2;
  },
});

비동기 처리

export const userDataState = selector({
  key: 'userDataState',
  get: async ({ get }) => {
    const userId = get(userIdState);
    const response = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
    const data = await response.json();
    return data; // API 응답 데이터 반환
  },
});

 

 

SET Selector

---

상태를 수정하거나 업데이트하는데 사용

const setMyState = selector({
  key: 'setMyState',
  set: ({ set }, newValue) => {
    set(numState, newValue); //상태 수정 및 업데이트
  },
});

 

 

사용

---

1. 설치

npm install recoil

 

2. Recoil 상태 관리를 활성화하기위해 최상위 컴포넌트에 < RecoilRoot > 추가

import { RecoilRoot } from "recoil";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

 

3. atom 생성

-atom.tsx

import { atom } from "recoil";

export const isDarkAtom = atom({
    key: "isDark", //고유값
    default: false, //초기값
})

 

4. Atom이나 Selector의 값 사용

• useRecoilValue ≒ state (값을 읽기만 함)
• useSetRecoilState ≒ setState (값을 설정/업데이트)
• useRecoilState ≒ useState (값을 읽고 설정)

function MyComponent() {
  const isDark = useRecoilValue(isDarkAtom); //읽기만 가능
  const setDarkAtom = useSetRecoilState(isDarkAtom); //쓰기만 가능
  const [isDark, setDarkAtom] = useRecoilState(isDarkAtom); // 읽고 쓰기 가능
  const toggleDarkAtom = () => setDarkAtom((x) => !x);
  ... 
}

 

 

예제

---

//atom.tsx
export const minState = atom({
    key: "min",
    default: 0,
})

export const hoursSelector = selector({
    key: "hours",
    get: ({get})=>{
        const min  = get(minState); //minState의 값이 변경시 get 함수도 자동으로 실행
        return min / 60;
    },
    set: ({set}, newValue) =>{
        const min = Number(newValue) * 60
        set(minState, min)
    }
})

//App.tsx
function App() {
  const [min, setMin] = useRecoilState(minState);
  const [hours, setHours] = useRecoilState(hoursSelector);
  // hours는 hourSelector의 get 값을 사용.
  // setHours는 hourSelector의 set 함수와 연결.
  
  const onMinutesChange = (e:React.FormEvent<HTMLInputElement>) => {
    setMin(+e.currentTarget.value);
  }
  const onHoursChange = (event: React.FormEvent<HTMLInputElement>) => {
    setHours(+event.currentTarget.value); //set 함수가 실행
  };

  return (
    <div>
      <input type="number" placeholder="Minutes" value={min} onChange={onMinutesChange}/>
      <input value={hours} type="number" placeholder="Hours" onChange={onHoursChange} />
    </div>
  );
}

 

 

+)

interface IToDoState {
    [key:string]: string[];
}

export const toDoState = atom<IToDoState>({
  key: "toDO",
  default: {
    ToDo : ['a','b','c'],
    Doing: ['d','e'],
    Done: ['f'],
  }  
})