Recoil Structure

현재 subscribe 하고 있는 컴포넌트에다가만 상태를 쏴주는 모습

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

Recommendations