Recoil

Install

• npm

 npm install recoil

• yarn

 yarn add recoil

RecoilRoot

• recoil 상태를 사용하는 컴포넌트는 무조건 RecoilRoot로 감싸줘야한다.
• 대체로 가장 최상단 index.tsx에 APP을 감싸주는 식이다.

 <RecoilRoot>	// Recoil Root 적용!
      <React.Suspense fallback={<div>Loading... </div>}>
        <App />
      </React.Suspense>
    </RecoilRoot>

Atoms

• Recoil의 상태의 단위를 의미한다.
• 컴포넌트간에 Atoms들이 공유되며 구독 및 업데이트가 가능하다.
• atom이 변경되면 구독중인 모든 컴포넌트들이 리렌더링 된다.
• atoms 설정시 Recoil의 atom() 메서드를 통해 변수에 할당 해주면 되는데 이때 key:value의 프로퍼티를 필수로 설정해야한다.
• key: 고유한 key값(보통 atom을 생성하는 변수명으로 지정)
• default: atom 초기값 (useState(default)이런 느낌)
  • default 값은 promise 객체도 설정 가능하나 , atom에서 바로 비동기 통신은 할 수 없다. (selector에서 해결)

// /src/recoil/index.ts

import { atom } from 'recoil';

export const FirstState = atom<string|null>({
  key: 'first',
  default: null,
})

export const SecondState = atom<string[]>({
  key: 'second',
  default: [],
})

hooks

• 전역상태 (Atoms/Selector)를 가져오거나 변경시에 사용되는 훅이다.
• 기본적으로 4가지 정도를 사용한다.
  • useRecoilState() : useState() 와 유사하다. 인자에 Atoms(혹은 Selector)를 넣어준다.
  • useRecoilValue() : 전역상태의 state 상태값만을 참조하기 위해 사용된다.
  • useSetRecoilState() : 전역상태의 setter 함수만을 활용하기 위해 사용된다.
  • useResetRecoilState() : 전역상태를 default(초기값)으로 Reset 하기 위해 사용된다.

import { useRecoilState,useRecoilValue ,
useSetRecoilState, useResetRecoilState } from 'recoil';


function TestComponent () {
  // FirstState atoms 의 getter,setter 생성, useState 유사
 const [first , setFirst] = useRecoilState(FirstState) 
 
  // 값만 반환.
 const firstValue= useRecoilValue(FirstState)
 
 // 값을 변경하는 함수만 반환.
 const setSecondState= useSetRecoilState(SecondState)
 
 // 리셋.
 const resetSecond = useResetRecoilState(SecondState)

 // 사용
 
 return (
 <div>
 	<span>{first}  useRecoilState 사용</span>
    <span>{firstValue} useRecoilValue 사용</span>
 	<button onClick={()=>{setFirst('얌')}}> 얌으로 변경 </button>
    <button onClick={()=>{setSecondState('냠')}}> 냠으로 변경 </button>
    <button onClick={resetSecond}> 리셋 세컨드 사용 </button>
</div> 
 )
}

Selector

atom 또는 다른 Selector로 이루어진 순수함수.

• Get

  • 파생된 상태의 값을 평가하는 함수.
  • 값을 직접 반환하거나 비동기적인 Promise나 또는 같은 유형을 나타내는 atom이나 selector를 반환 할 수 있다.

• Set

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

import {atom ,selector} from 'recoil'

const A = atom({
	key: 'A',
    default: 19 
})![]

const B = selector<Number>({
	key: 'B',
    get: ({get}) => {
    const newB =  get(A) - 9 ;
    return newB
    },
    set: ({set} , new) => 
     const newB = Number(new) - 10
     set(A ,newB)
    
})