Recoil

* Recoil은 React를 위한 상태관리 라이브러리이다.

* 하나의 상태를 모든곳에서 공용으로 사용 가능 

* 설치

npm install recoil

 

* Recoil을 사용하기 위해 부모트리 어딘가에 RecoilRoot가 필요하다. 

function App(){
    return(
        <RecoilRoot>
                <Tab />
        </RecoilRoot>
    );
}

 

* Recoil Atom 만들기

import {atom} from "recoil";

export const isDisplay = atom({
    key : "isDisplay",
    default: true
);

* isDispay 값 참조 : useRecoilValue

const isDisplay = useRecoilValue(isDisplay);

* 값 변경 : useSetRecoilState

const setDisplayAtom = useSetRecoilState(isDisplay);
const toggleDisplayAtom = () => setDisplayAtom((prev) => !prev);

 

** 간단하게 이미지로 설명을 첨부 하자면

1. React에서 State를 공유 하려면 아래의 그림과 같이 컴포넌트가 순차적으로 최종 필요한 컴퍼넌트로 계속 전달을 해 줘야함

React 의 state 전달 개념 : Recoil Youtube 설명 화면 캡쳐

 

2. Recoil을 이용하면 내가 원하는 Atom을 어디에서는 공유해서 사용 가능 

Recoil&nbsp; 개념 설명 : Recoil Youtube 설명 영상 캡쳐

굿~!!!