[에러해결]Uncaught TypeError: Cannot destructure property 'future' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.

typescript + react를 사용하던 도중, 중복되는 코드를 여러번 쓰지 않기 위해서 최적화를 하려다 발생하였다.

Header.tsx 컴포넌트 파일에

//Header.tsx
      <NavLink to={`${process.env.PUBLIC_URL}/`}>
        <img
          className="header-logo"
          src={process.env.PUBLIC_URL + "/assets/images/header-logo.svg"}
        />
      </NavLink>

이렇게 코드를 작성했는데, NavLink 때문에 자꾸

Uncaught TypeError: Cannot destructure property 'future' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null.

위와 같은 에러가 뜨는 것을 확인할 수 있었다.

프로젝트 초기 세팅 단계였기에 react-router-dom 삭제 후 재설치 등 기초적인 부분부터 잘못된 부분을 찾아나갔고,
컴포넌트가 아닌 페이지에서는 NavLink가 잘 작동하는 것을 확인할 수 있었다.

즉, 컴포넌트에서만 동작하지 않는 것이었다.

router와 관련된 문제일 것이라고 예상하고, DOM에서 상단에 위치한 App.tsx부터 살펴보았다.

//App.tsx
function App() {
  return (
    <>
      <RecoilRoot>
        <Layout>
          <Router></Router>
        </Layout>
      </RecoilRoot>
    </>
  );
}

저 Layout 컴포넌트 내에 Header가 있는데, 이 컴포넌트가 라우터 밖에 위치해서 발생하는 문제였다.

그래서 아래처럼 App.tsx에서가 아닌 Header가 사용되는 페이지에서 각각 호출해주었더니, 잘 해결되는 것을 볼 수 있었다.

//App.tsx
function App() {
  return (
    <>
      <RecoilRoot>
        <Router></Router>
      </RecoilRoot>
    </>
  );
}

//Home.tsx
.....
return (
    <Layout>
      <section>....</section>
    </Layout>
  )

---

vue + typescript에서는 같은 코드를 반복하지 않기 위해서 이런 식으로 작성했었는데, (물론 구조가 조금 다르겠지만...) 현재 진행하는 프로젝트에서는 불가능하다는 것을 확인했다...
그렇다면 중복된 코드를 매 페이지마다 작성해주어야 하는 것인데, 이 방법이 과연 최선일까?
이 부분은 조금 더 공부해보아야 할 것 같다.