Recoil?

• 페이스북에서 만든 새로운 React를 위한 상태 관리 라이브러리

상태관리

• 기본적으로 부모의 state를 자식에게 props로 전달해서 사용
• 깊이가 깊어질 시?
  • 첫번째 부모에게 모든 state를 몰아줘야하고, state가 바뀌면 자식 컴포넌트가 리렌더링 되기 때문에 해당 state(props)를 이용하지 않는 자식 컴포넌트로 리렌더링이 된다.
  • props drilling 문제 발생
  • 리렌더링 되는 조건 3가지?
    • state가 바뀔 때
    • props가 바뀔 때
    • 부모컴포넌트가 리렌더링 될 때

Recoil의 등장 배경

• 컴포넌트의 상태는 공통된 상위요소까지 끌어올림으로써 공유될 수 있지만, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 •••

장점

• 비동기처리를 기반으로 작성되어 있어, 동시성 모드도 지원
• suspense로 감싸면 쉽게 동시성 모드를 구현할 수 있음.
  • suspense란?
    • 특정 컴포넌트에서 사용되고 있는 데이터의 준비가 아직 끝나지 않았음을 react에 알릴 수 있으며, data fetching 라이브러리와 함께 사용할 수 있는 구조

캐싱 지원

• selector를 통해 비동기 작업을 진행할 때 사용되는 atom에 자동으로 의존성이 걸림.
• atom이 변경될 때마다 selector이 변경
  • atom의 값이 같으면 내부적으로 반환 값을 기억하고 있기 때문에 캐싱된 값을 반환
• 비동기 데이터를 Loadable이라는 객체로 변환이 가능

Atom(상태)

• Atoms는 상태의 단위이며, 업데이트와 구독이 가능
• atom이 업데이트되면, 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링
• 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트 상태 공유

import { atom } from "recoil";

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

유니크한 키 값과 기본값 설정

지원하는 Hook

• useRecoilState : 기존 useState와 같이 변경되는 값과 해당 값을 변경하는 함수 반환
• useRecoilValue : 구독하는 값만 반환하는 함수.
  • update함수가 필요없을 경우 사용
• useSetRecoilState : 구독하는 값을 변경하는 함수만 반환
• useResetRecoilState : 값을 기본값으로 reset시키는 함수를 반환

Recoil을 사용할 때
index.js는!?
RecoilRoot로 감싼다!

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { RecoilRoot } from "recoil";

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById("root")
);

위와 같이 React.StrictMode안에 App을 RecoilRoot로 감싼다!

Selectors (순수 함수)

• atom의 상태에서 의존하는 동적인 데이터를 생성
• get함수(필수 항목)를 통해 atom을 1개이상 가져올 수 있음
• atom을 조합하여 간단히 새로운 데이터를 생성할 수 있음
• 한 개 이상의 atom 정보를 업데이트 하도록 set함수를 받을 수 있음

export const countInputState = selector({
  key: "countTitleState",
  get: ({ get }) => {
    return `현재 카운트는 ${get(countState)} 이고 입력값은 ${get(
      inputState
    )} 입니다.`;
  },
  set: ({ set }, newValue) => {
    // 2번째 파라미터 에는 추가로 받을 인자를 나타냅니다.
    set(countState, Number(newValue)); // count atom 수정
    set(inputState, newValue); // input atom 수정
  },
});

위 코드와 같이 get함수 및 set함수를 사용할 수 있다.