Recoil (atom, selector)

global 한 state 관리를 사용하기 위해 쓰는 라이브러리로, state가 local 에서 처리되는것과 다르게, 1개의 state를 여러 element 에서 변경 및 사용 할 수 있다. 전역변수 느낌.

 

설치를 위해 npm install recoil

 

Recoil을 쓰고자 하는 elements 들은 <RecoilRoot> 태그 아래에 존재해야 한다.

• 사용법을 요약하자면, 
  • Atom 생성
    • 필요시 selector 을 통해 추가 생성
  • element 에서 atom import 및 recoil hook import -> atom 변수에 접근하여 코드 구현
  • main element 에서 recoilroot import 후 <RecoilRoot> 태그 안에 위의 element 태그들 작성

 

• Atom
  • 쉽게 말해 변수역할
  • 업데이트와 구독이 가능하며 이 값이 변화하면 구독중인 elements 들이 다시 렌더링 된다. \
  • atom() 를 호출하여 key , default 값으로 설정하여 사용한다.

import {atom} from 'recoil';

export const at1 = atom(
    {
        key:"atom1",
        default : 0
    }

);

• Selector
  • 기존에 있던 atom 변수값을 조작하여 새로운 atom을 만들기 위한 것으로, get, set 함수가 지원된다.
    • 예 : atom1 의 값이 1로 변경될 때, selector에서 해당 값에 * 2 를 한 새로운 atom을 리턴
      • 즉, atom1에 항상 2배수로 비례하는 state가 되는것.

import {atom, selector} from 'recoil';

export const at1 = atom(
    {
        key:"atom1",
        default : 0
    }

);

export const at2 = selector(
    { 
        key:"at2",
        get : (get) => {
            return (get(at1) * 2);
        },
        set : ({set, newVal}) => {
            set(at1,newVal / 2);
        }

    }
);

•  사용되는 Hook들
  
  • useRecoilState()
    • atom을 읽고 쓰기위한 용도로 사용
  • useRecoilValue()
    • atom을 읽기전용으로 사용
  • useSetRecoilState()
    • atom을 쓰기 전용으로만 사용
  • useResetRecoilState()
    • atom을 default 값으로 초기화 할때 사용

 

 

• 사용 예

//메인인 js 에서 
import { RecoilRoot } from "recoil";

export function RecoilTest()
{
    return(
        <RecoilRoot>
            <태그명1/>
            <태그명2/>
        </RecoilRoot>
    );
}


//1번 태그명의 element 에서 
import { atom명1, atom명2 } from "파일위치";
import { useRecoilValue } from "recoil";

export function 태그명1()
{
    const n = useRecoilValue(at1);
    const n1 = useRecoilValue(at2);
    return (
        <div>
            {n}
            <br/>
            {n1}
        </div>
    );
}


//2번 태그명의 element 에서 
import { atom명1, atom명2 } from "파일위치";
import {  useRecoilState } from "recoil";

export function 태그명2()
{
    const [n,changeState] = useRecoilState(atom명1);

    const inc = () => {

        changeState(n + 1);
    }

    const dec = () => {
        changeState(n - 1);
    }
    return (
        <div>
             <button onClick={inc}>increase</button>
             <br/>
             <button onClick={dec}>decrease</button>
        </div>
       
    );
}