React error 해결법: Uncaught Error: This component must be used inside a <RecoilRoot> component.

에러 발생

react 개발시 Recoil 사용시 아래와 같은 에러가 발생할 때가 있다.

Uncaught Error: This component must be used inside a <RecoilRoot> component.

 

원인

RecoilRoot 로 감싸주지않았다. 

root.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>
);

 

해결법

Recoil 을 사용하는 상위 파일 을 RecoilRoot 로 감싸준다.

ex) index.tsx 에서 <RecoilRoot> 로 감싸준다.

<RecoilRoot>
  <React.StrictMode>
    <App />
  </React.StrictMode>
</RecoilRoot>