Recoil에 대해

이번에 Recoil을 처음 사용해본 뒤 사용 방법에 대해 기록

 

Recoil이란 전역으로 상태를 관리하기 위한 상태 관리 라이브러리이다.

 

사용해본 결과 Redux보다 매우 편리했다. 이해하는데에 큰 시간을 들일 필요가없는 느낌?

 

---

Recoil의 핵심 개념

 

1. Atom (전역 상태)

- 전역 상태를 저장하는 변수라고 생각하면 쉽다. 그냥 변수다.

- key와 default로 이루어져있다. key는 이름이고 default는 값이다.

- React의 state와 비슷하지만 전역으로 사용할 수 있다.

 

import { atom } from 'recoil';

const darkModeState = atom({
  key: 'darkModeState',  // 고유한 key (필수)
  default: false,        // 기본값
});

 

darkMode를 예시로 보면 위와 같다.

 

 

2. Selector (상태 가공)

- Atom에 저장해 둔 변수의 값을 가공하여 새로운 값을 생성

-여러 Atom을 조합 또는 상태를 변형할 때 사용한다.

-쉽게 생각하면 Atom에 저장해둔 변수를 변경시킬 함수를 내장시키는 공간이다.

 

const darkModeToggleSelector = selector({
  key: 'darkModeToggleSelector',
  get: ({ get }) => get(darkModeState), // atom의 현재 값을 반환
  set: ({ set, get }) => {
    set(darkModeState, !get(darkModeState)); // 현재 값을 반대로 변경
  },
});

 

 

get은 Atom의 값을 가져와 가공

set은 Atom의 값을 변경하는 함수를 포함 가능

 

 

3. 컴포넌트에서 사용

 

3-1 Atom을 사용할 때

 

const [darkMode, setDarkMode] = useRecoilState(darkModeState);

<button onClick={() => setDarkMode(!darkMode)}>
  {darkMode ? '🌙 다크 모드' : '☀️ 라이트 모드'}
</button>

 

 

3-2 Selector를 사용할 때

 

const [darkMode, toggleDarkMode] = useRecoilState(darkModeToggleSelector);

<button onClick={() => toggleDarkMode()}>
  {darkMode ? '🌙 다크 모드' : '☀️ 라이트 모드'}
</button>

 

 

toggleDarkMode()를 호출할 때 마다 darkMode의 값이 변경된다.

 

 

여기서 darkMode는 Selector에 있는 get의 값이다. = get( darkModeState ) = darkModeState 의 반환 값이라는 뜻

 

toggleDarkMode는 Selector의 set 함수이다. = set(darkModeState, !get(darkModeState))

 

사실 계속 사용해보면서 이해하는게 젤 빠를 것 같다. 아직까지 selector은 헷갈리는 부분이 조금 존재한다.