개발/자바스크립트

[리액트] Recoil - state management

대왕판다 2022. 1. 19. 22:07

REDUX? or RECOIL? 

-> Nico said, "Everytime you learn or use libraries, framworks and other skills, You MUST know why you need and use those." Because those are built to sort out things.

 

 

State management의 필요성?

다크모드, 유저의 로그인 여부 등 리액트 앱의 각종 state를 일일이 부모/자식 컴포넌트까지 argument로 전달해준다면 수많은 interface를 생성하고 반영해주어야함. => global state(atoms)를 사용하면 이를 해결할 수 있음!

  const isDark = useRecoilValue(isDarkAtom);
  const setDarkAtom = useSetRecoilState(isDarkAtom);
  const toggleDarkAtom = () => setDarkAtom((prev) => !prev);

 

useState 처럼 value 와 modifier function을 같이 써주고자한다면

  const [value, modFn] = useRecoilState(toDoState)

useRecoilState를 써주면 된다.

 

 

-

https://recoiljs.org/ko/docs/introduction/installation

 

설치 | Recoil

NPM

recoiljs.org