현재 subscribe 하고 있는 컴포넌트에다가만 상태를 쏴주는 모습
Recoil
도 사용하려면 일단 RecoilRoot
로 감싸줘야해서 저는 RecoilRoot
에서 Context API
를 사용해서 상태를 내려주지만 무언가 처리를 해주기 때문에 전체 리랜더링이 없음 React Context API 자체와 달리내려주고 있는 스토어가
React
의 state
가 아니기때문에 상태변경에도 이 context
가 통과하는 컴포넌트들을 리렌더링 하지 않는 것그럼 어떻게
Recoil
의 atom
을 setState
해주었을 때 이 atom
의 value
를 사용하고 있는 컴포넌트들이 리렌더링 될 수 있는걸까?useRecoilValue
를 보면 알 수 있는데, 내부적으로 useStoreRef
를 사용해서 Recoil
스토어의 ref
를 받아오고 있고useRecoilValueLoadable
훅을 사용해서 Loadable
을 얻어내고거기서
useState
를 사용해서 setState
를 forceUpdate
로 명명해두고, 해당 함수가 원하는 시점에 실행될 수 있게 subscribeToRecoilValue
이라는 함수의 콜백함수로 지정useRecoilValue
컴포넌트를 사용하는 컴포넌트는 subscribeToRecoilValue
함수를 통해 인자로 들어오는 recoilValue
에 대해 subscribe, subscribeToRecoilValue
에 등록된 콜백이 Recoil
런타임에서 정해진 시점에 호출될 때 useState
의 상태가 바뀜에 따라 해당 컴포넌트만 리렌더링데이터를 아톰단위로 선언하고, 리액트 훅의 useState와 매우 유사하게 동작하는 useRecoilState을 이용해 보다 간편한 상태관리가 가능