🔎Recoil

• React 전역 상태관리를 위한 라이브러리 (설명)
• 전역 상태로 Atom과 Selector가 있음

💡Atom

• Recoil에서 가장 기본적인 상태 단위
• key, default 로 구성
  key : 보통 atom의 이름, 전역적으로 유일한 값
  default : 값

예시

export const ExAtom = atom({
    key: '키값',
    default: 값
  })

사용방법

• atom 불러올 파일에서 사용할 atom import
• useRecoilState사용해 useState와 비슷하게 사용

const [value, setValue] = useRecoilState(ExAtom)

• useRecoilValue : 값만 필요한 경우

const value = useRecoilValue(ExAtom)

• useSetRecoilState : 변경함수만 필요한 경우

const setValue = useSetRecoilState(ExAtom)

💡Selector

• Atom을 기반으로 파생된 값을 계산하는 데 사용
• key, get, set 으로 구성
  key : (보통) 아톰의 이름, 전역적으로 유일한 값
  get : 원본 state의 값을 변경시키지 않고 원하는 값 가져옴
  set : 원본 state의 값을 변경

예시

export const ExSelector = selector({
 key: '키값',
 get: ({get}) => {
  const 원본 = get(ExAtom)
  return 원본을_로직통해_변형한값
 }
 set: ({set}, 인자로_받아온값) => {
  const 변경할_새로운값 = 인자로_받아온값을 변형하는로직
  set(ExAtom, 변경할_새로운값)
 }
})

사용방법

• selector 불러올 파일에서 사용할 selector import
  atom과 같이 useRecoilState, useRecoilValue, useSetRecoilState 사용

  // 한번에 선언하기
  const [selector, setSelector] = useRecoilState(ExSelector)
  
  // get 결과값 가져오기
  const get_결과값_가져오기 = useRecoilValue(ExSelector)
  
  // set 기존값에서 변경된 값 가져오기
  const set_기존값_변경하기 = useSetRecoilState(ExSelector)
  
  // 위 코드들에서 다음은 같은 값
  // selector = get_결과값_가져오기
  // setSelector(인자) = set_기존값_변경하기(인자)

💡적용시켜보기 - 코드

UserAtom.js

import { atom, selector } from 'recoil';

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

export const myNewSelector = selector({
  key: 'myNewSelector',
  get: ({ get }) => {
    const 원본 = get(myNewAtom);
    return 원본 + 10;
  },
  set: ({ set }, 인자로_받아온값) => {
    const 변경할_새로운값 = Number(인자로_받아온값) + 10;
    set(myNewAtom, 변경할_새로운값);
  },
});

App.js

import { useRecoilState } from 'recoil';
import { myNewAtom, myNewSelector } from './recoil/UserAtom';

export default function App() {
  const [atom, setAtom] = useRecoilState(myNewAtom);
  const [selector, setSelector] = useRecoilState(myNewSelector);

  return (
    <>
    // 버튼1 : 현재 atom값 보여주는 버튼
      <button onClick={() => {
        console.log('현재 atom : ' + atom);
      }}>
        현재 atom 값 보기
        <div>코드: atom</div>
      </button>

	// 버튼2 : setAtom() 통해서 atom값 1 증가시키는 버튼
      <button onClick={() => {
        setAtom((prev) => prev + 1);
        console.log('atom값 +1');
      }}>
        atom값 바꾸기 (+1)
        <div>코드: setAtom((prev) => prev + 1)</div>
      </button>

	// 버튼3 : get 통해서 원본 atom값 변경시키지 않고 원본값에서 10 증가한 값 가져오는 버튼
      <button onClick={() => {
        console.log('selector에서 현재 atom 가져와 변형한 값 : ' + selector);
        console.log("'현재 atom 값 보기' 버튼을 클릭해보세요");
      }}>
        get 이용해 selector에 연결된 atom의 원래값 변경하지않고, 변형한 값 가져오기 (+10)
        <div>코드: selector</div>
      </button>

	// 버튼4 : set 통해서 원본 atom값을 10 증가시키는 버튼
      <button onClick={() => {
        setSelector(atom);
        console.log('setSelector(인자)에서 인자로 들어온 값 + 10');
        console.log("'현재 atom 값 보기' 버튼을 클릭해보세요");
      }}>
        set 이용해 selector에 연결된 atom의 원래값의 변경하기 (+10)
        <div>코드: setSelector(atom)</div>
      </button>
    </>
  );
}

💡적용시켜보기 - 결과

1. setAtom() 통해서 atom값 1증가시키기
   
2. get 통해서 원본 atom값 변경시키지 않고 원본값에서 10 증가시키기
   
3. set 통해서 원본 atom값을 10 증가시키는 버튼