Recoil

State Management Library Recoil [https://recoiljs.org/ko/]

 

state management tool을 이용하는 이유

 - props가 이용되지 않는 components에서 불필요하게 prop을 받아 전해줘야 한다. (Traveling prop problem)

 - 그에 따라 수정 소요 발생 시 오류가 발생할 가능성이 높은 등의 문제가 발생할 수 있다.

 

다른 State management tools? 

React 자체가 가지고 있는 Context, Redux 등이 존재함.

 

Recoil의 state 저장은 atom이라 부름

 

- root를 RecoilRoot로 감싸주어야 한다

- atom을 생성하고 보관하는 파일을 만드는 편이 좋다.

 

atom의 생성

// atom의 생성 방법

export isDarkAtom = atom({
	key: "유일한 키 이름",
    default: "기본 value"
});

// atom을 불러서 이용하는 방법

const isDark = useRecoilValue(isDarkAtom);

// atom의 value를 수정하는 방법
// atom의 setter function은 useState의 setState와 유사하게 작동한다.

const setterFn = useSetRecoilState(isDarkAtom);
// new state를 부여
setterFn((prevState) => newState);