집플래닛 트러블 슈팅 | Cannot destructure property 'basename' of'react_WEBPACK_IMPORTED_MODULE_O_useContext(…….)' as it is null.

서론

최근 Next.js와 Zustand를 사용하여 팀 프로젝트를 진행하면서 몇 가지 오류에 직면하게 되었습니다. 특히, 컴포넌트 간의 상태 관리와 라우팅 관련 문제로 인해 어려움을 겪었습니다. 이 포스팅에서는 발생한 오류와 그 해결 과정을 공유하려고 합니다.

 

문제 설명

프로젝트에서 다음과 같은 오류가 발생했습니다:

이 오류는 CounterStoreContext를 사용하여 상태를 관리하는 과정에서 발생했습니다. 프로젝트의 Sidebar 컴포넌트에서 상태를 사용하고자 했으나, context가 제대로 제공되지 않아 에러가 발생한 것으로 보입니다.

원인 분석

오류 메시지를 분석해보니, useContext를 사용할 때 CounterStoreContext가 정의되지 않은 상황이었습니다. 이는 주로 context가 올바르게 생성되지 않았거나, provider 내부에서 사용되지 않았기 때문입니다. 또한, Link 컴포넌트를 react-router-dom에서 가져오는 대신 Next.js의 next/link에서 가져와야 했습니다.

 

해결 과정

• Context 사용 수정: useContext를 사용하여 CounterStoreContext를 올바르게 가져오기 위해 다음과 같이 코드를 수정했습니다:

• const counterStoreContext = useContext(CounterStoreContext);

• Link 컴포넌트 수정: Link 컴포넌트를 Next.js에서 가져오도록 수정하고, 사용 방법을 다음과 같이 변경했습니다:

• import Link from "next/link";
  ...
  <Link href="/donation">후원하기</Link>

결과

수정 후, 프로젝트는 정상적으로 작동하게 되었고, 더 이상 오류 메시지가 나타나지 않았습니다. 이제 컴포넌트 간의 상태 관리가 원활하게 이루어지고, 라우팅 또한 제대로 작동합니다.

마무리

이 경험을 통해 Next.js와 Zustand를 사용할 때 주의해야 할 점을 다시 한 번 깨닫게 되었습니다. 특히, context를 사용할 때는 항상 provider로 감싸고 있는지 확인해야 합니다. 비슷한 문제를 겪는 개발자들에게 이 글이 도움이 되었기를 바랍니다. 혹시 추가적인 질문이나 경험이 있다면 댓글로 공유해 주세요!