This component must be used inside a <RecoilRoot> component. 해결 방법

이번 글에서는 This component must be used inside a <RecoilRoot> component. 에러에 대하여 알아보도록 하겠습니다.

 

 

This component must be used inside a <RecoilRoot> component

 

 

컴포넌트는 <RecoilRoot> 태그 내에서 사용해야 한다고 합니다. recoil의 상태관리하는 역할을 보면 당연하다는 생각이 듭니다. 실제로 recoil.org에서 <RecoilRoot> 태그의 위치는 루트 컴포넌트에 넣는 것이 가장 좋은 방법이라고 적혀있습니다. 이를 알면서도 저는 에러가 났네요.. 왜 일어났는지는 아래에서 확인해보겠습니다.

recoil.org - RecoilRoot 태그

 

[에러 원인]

저는 App.tsx에서 <RecoilRoot>를 최상단 루트로 감싸줬는데 에러가 발생하였습니다. 확인해보니 App.tsx가 최상단 루트가 아니더군요.. index.tsx가 App.tsx를 감싸고 있어 index.tsx에서 <RecoilRoot>를 App.tsx에 감싸줘야 했습니다.

[App.tsx]

return (
    <RecoilRoot>
        <Header/>
        <MstGrid>
    </RecoilRoot>
);

[index.tsx]

ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
);

 

 

[해결 방법]

index.tsx에서 <App/>을  <RecoilRoot>를 App.tsx에 감싸니 에러가 해결되었습니다.

[App.tsx]

return (
    <Header/>
    <MstGrid>
);

[index.tsx]

ReactDOM.render(
  <RecoilRoot>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </RecoilRoot>,
  document.getElementById('root')
);

 

 

 

Reference

https://recoiljs.org/ko/docs/introduction/getting-started