[알리미 8] 프로젝트 업그레이드 4 : TypeError

TypeError: Cannot read properties of null (reading 'useContext')

Admin page에서 처음에 모든 userList를 받아오고, 원하는 user를 클릭할 경우 detail component가 나타난다.
해당 컴포넌트에서 user의 info를 더 자세히 확인하고 수정, 삭제할 수 있도록 구현할 예정이었음.

그렇다면 이제 TypeError가 뜬 시점을 알아보자.
admin 부모 컴포넌트와 자식 컴포넌트인 userList, userInfo컴포넌트가 있는 구조이다.
(userList와 userInfo는 형제 컴포넌트 인 셈.)

admin component에 state를 생성하고,  userList에서 원하는 user를 클릭하면 해당 user의 id를 admin component의 state에 set 시킨다. 그리고 set 된 state를 userInfo component로 넘겨서 해당 user의 id로 getUser api를 호출하려 했는데,
api를 호출하는 로직 때문에 아래의 error가 발생해서 진도를 못 나가고 있는 상태이다.

또한 Console창에 아래의 Warning이 발생되었음.

왜 이런 상황이 발생하였는지 잘 모르겠으니깐, Warning을 하나씩 살펴보면서 Error를 해결해보자.
아래의 공식문서를 통해서 해당 오류 메시지를 파악해보기로 하였다.
https://ko.reactjs.org/warnings/invalid-hook-call-warning.html

1. You might have mismatching versions of React and the renderer (such as React DOM)
(React와 렌더링(예: React DOM)의 버전이 일치하지 않을 수 있습니다.)

해당 프로젝트의 버전은 일치하므로 1번은 패스.

---

2. You might be breaking the Rules of Hooks (Hooks의 규칙을 위반하고 있을 수 있습니다.)

 

---

3. You might have more than one copy of React in the same app
(동일한 앱에 둘 이상의 React 사본이 있을 수 있습니다.)

Hooks가 작동하려면 애플리케이션 코드에서 가져온 react가 react-dom 패키지 내부에서 가져온 react와 같은 모듈이어야 한다.
따라서, 또 다른 react 모듈이 존재하는지 알기 위해 명령어 npm ls react를 통해 다른 모듈의 유무를 확인하였고,
아래와 같이 react@18.2.0 버전만 존재하는 것을 볼 수 있음.
3번도 패스.

---