Recoil

Recoil 설치

npm install recoil

특징

recoil은 기존 상태 관리 라이브러리 redux, mobx와 달리 react 전용 상태관리 라이브러리이다.
다른 라이브러리보다 상대적으로 가볍고 러닝커브가 적으며 동시성 모드(Concurrent Mode)를 비롯한 새로운 React의 기능들과 호환성도 가진다.

공식문서

https://recoiljs.org

Recoil 시작하기

RecoilRoot

recoil을 시작하기 앞서 provider와 비슷한 개념인 RecoilRoot 가 필요하다. 루트 컴포넌트(최상위 컴포넌트)가 RecoilRoot를 넣기에 가장 좋은 장소다.

**src/App.tsx

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );

atom

atom은 recoil에서 상태를 정의한 것이다.
어떤 컴포넌트에서나 읽고 쓰기가 가능하다. atom의 값을 읽는 컴포넌트들은 모두 atom을 구독한다.
그래서 구도한 atom의 상태가 변한다면 구독한 모든 컴포넌트들이 재랜더링 된다.

key: 유니크한 ID값
default: 초기값

/src/atom.ts

import { atom } from "recoil";

export const isDarkAtom = atom({
  key: "isDark",
  default: false,
});

atom을 사용할 컴포넌트들과 연결을 하기 위해 Hook을 사용한다.

useRecoilValue() 상태 값이 필요할때 사용한다
useSetRecoilState 상태를 업데이트하는 함수만 반환한다.
useRecoilState() useState와 같은 방식으로 배열의 첫 인덱스는 상태 두번째는 상태를 업데이트하는 함수를 반환한다.

const isDark = useRecoilValue(isDarkAtom)
const setIsDark = useSetRecoilState(isDarkAtom)
const [isDark, setIsDark] = useRecoilState(isDarkAtom)

useRecoilValue() 사용하기

...

function App() {
  const isDark = useRecoilValue(isDarkAtom);
  return (
    <>
      <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
        <GlobalStyle />
        <Router />
        <ReactQueryDevtools initialIsOpen={false} />
      </ThemeProvider>
    </>
  );

useSetRecoilState() 사용하기

  const setDarkAtom = useSetRecoilState(isDarkAtom);
  const toggleDarkHandler = () => setDarkAtom((prev) => !prev);
return (
...

      <Header>
        <Title>코인</Title>
        <button onClick={toggleDarkHandler}>Toggle Button</button>
      </Header>

...

Selector

state를 입력 받고 그 state를 변형해 반환하는 순수함수를 거쳐 반환된 값을 말한다.

set? - 이 속성이 설정되면 selector는 쓰기 가능한 상태를 반환한다. 첫번째 매개변수로 콜백 객체와 새로 입력 값이 전달된다. 사용자가 selector를 재설정할 경우 새로 입력 값은 T 타입의 값 또는 DefaultValue 타입의 객체일 수 있다. 콜백에는 다음이 포함된다.

get 매개변수
다른 atom이나 selector로부터 값을 찾는데 사용되는 함수. 이 함수는 selector를 주어진 atom이나 selector를 구독하지 않는다.

set 매개변수
업스트림 Recoil 상태의 값을 설정할 때 사용되는 함수. 첫 번째 매개변수는 Recoil state, 두 번째 매개변수는 새로운 값(newValue)이다. 새로운 값은 업데이트 함수나 재설정 액션을 전파하는 DefalutValue 객체일 수 있다.