Recoil

Recoil

리코일은 리액트를 위한 상태 관리 라이브러리

Recoil은 React state와는 수직적인 방향으로 상태를 관리한다.(React 상태의 영향을 받지 않고 필요한 부분에만 상태를 전달한다는 것을 의미)

상태를 구독중인 컴포넌트만 업데이트를 시킨다. Recoil이 관리하는 상태는 atom이라고 한다.

설치

npm i recoil
# or
yarn add recoil

---

RecoilRoote

Recoil state를 사용하는 컴포넌트들은 RecoilRoot를 필요로 한다.

// 기본적인 _app.js
function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp
  
// RecoilRoot 적용
import { RecoilRoot } from 'recoil'

function MyApp({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  )
}

export default MyApp

// _app.tsx
import "../styles/globals.css";
import type { AppProps } from "next/app";
import { RecoilRoot } from "recoil";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}
export default MyApp;

---

Atom

atom은 Recoil 상태의 기본 단위를 말하며 어떠한 컴포넌트에서 씌여지고 읽혀질 수 있다.
atom을 만들기 위해서는 key와 default값을 가져야 한다.

key는 atom을 구별하기 위한 유니크한 값이고, 계속해서 같은 상태를 유지할 수 있도록 도와준다.
default 값을 작성하면 atom은 이 값으로 상태를 초기화하거나 폴백값으로 세팅된다.

atom의 값을 읽는 컴포넌트는 해당 atom을 구독하고 있는 것과 마찬가지로, atom이 업데이트되면 해당 atom을 구독하는 모든 컴포넌트들이 리렌더링 된다.

// states/index.ts
import { atom } from 'recoil';

const testState = atom({
  key: 'testState',
  default: '바뀌기 전',
})

export { nameState }

// pages/index.tsx
import { useRecoilState } from 'recoil';
import { testState } from '../states';

export default function Home() {
  const [test, setTest] = useRecoilState(testState);
  console.log(test); // 바뀌기 전
  
  const handleState = () => {
    setTest("바뀜");
  };
  
  return (
    <div>
      <button onClick={handleState}>버튼</button>
	  // 버튼 누르면 바뀜으로 찍힌다.
    </div>
  )
}

---

Selector

파싱된 상태를 나타낸다. state가 변경된 것을 의미
state는 selector를 거쳐 pure function을 지나면서 값이 업데이트 된다.

import { atom, selector } from 'recoil';

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

export const getNameSelector = selector({
  key: 'getNameSelector',
  get: ({get}) => {
    const name = get(nameState)
  }
});

import React from 'react';
import nameState from '..'
import {
  useRecoilState,
  useRecoilValue,
  useSetRecoilState,
  useResetRecoilState
} from 'recoil';

function Name() {
  // useRecoilState를 사용하여 다른 파일에 있는 이름을 읽을 수 있다.
  const [name, setName] = useRecoilState(nameState);

  const currentName = useRecoilValue(nameState); // 읽기 전용
  const nameHandler = useSetRecoilState(nameState); // 값만 변경 시키기
  const resetName = useResetRecoilState(nameState); // default값으로 변경
}

---

Functions

useRecoilValue 값을 읽어오고 싶을 때
useSetRecoilState 값을 업데이트하고 싶을 때
useRecoilState 둘 다 하고 싶을 때 (hook의 setState 느낌)