useUser 훅을 사용하게 되면 fetch 를 통해 memberId 값이 업데이트 됩니다.
로그인 인증이 되었고 (로컬스토리지에 토큰이 있고) 에러가 나지 않는다면 업데이트 합니다.
setter 부분은 useEffeact 내부에 적지 않았더니 "Cannot update a component (Header) while rendering a different component (Header)" 에러가 발생하였습니다. useEffect 내부에 적지 않고 useUser 훅의 바디에서 직접 setMemberId를 호출하게되면 렌더링이 진행되는 도중에 상태 업데이트가 발생하게 되어 에러가 발생됩니다.
챗지피티에게 물어보니 이 에러는 React의 함수형 컴포넌트에서 Hook 호출 규칙을 위반할 때 발생한다고 합니다.
useProfile 훅에서 fetchProfile 함수를 호출하는데, 이 함수 내에서 useQuery 훅이 사용되고 있고 useQuery는 fetchProfile 함수가 조건에 따라 호출되기 때문에, 컴포넌트의 렌더링 과정에서 조건부로 훅이 실행될 수 있습니다. 이는 훅의 호출 순서가 변경될 수 있다는 것을 의미하며, 이것이 오류의 원인이 됩니다.
라고 했습니다..
✅ 체크리스트
📝 작업 상세 내용
1️⃣ auth store 수정
handleCheckAuth
-> authStore 내부로 이동2️⃣ user store 생성
user state
memberId
와setMemberId
를 state로 가지고 있습니다.useUser 훅
"Cannot update a component (Header) while rendering a different component (Header)"
에러가 발생하였습니다. useEffect 내부에 적지 않고 useUser 훅의 바디에서 직접 setMemberId를 호출하게되면 렌더링이 진행되는 도중에 상태 업데이트가 발생하게 되어 에러가 발생됩니다.3️⃣ profile store 생성
profile state
profileImageURL
,nickname
,profileIntro
와 setter들을 state로 가지고 있습니다.useProfile 훅
테스트
에러없이 잘 돌아가는 걸 확인했습니다!
🚨 버그 발생 이유
작업하면서 발생했던 에러를 정리하자면 아래와 같습니다
Rendered more hooks than during the previous render.
마이페이지에서 새로고침시 위 에러가 발생하면서 렌더링이 되지 않았습니다. 마이페이지의 ProfileSection 컴포넌트에서 발생하는 것을 알게되었고 원인은 useProfile에 있었습니다. 그때 당시의 useProfileStore와 useProfile 코드입니다
챗지피티에게 물어보니 이 에러는 React의 함수형 컴포넌트에서 Hook 호출 규칙을 위반할 때 발생한다고 합니다.
그래서 useProfile에서 useQuery를 직접 호출하는 식으로 해결했습니다.
🔎 후속 작업 (선택 사항)
🤔 질문 사항 (선택 사항)
zustand가 처음이라 이 방법이 옳은 방법인지 판단이 잘 서지 않습니다! 도와주세요!
📚 참고 자료 (선택 사항)
Zustand 사용법 zustand 어떻게 써야 잘썼다고 소문날까 Zustand 현명하게 사용하기 (불필요한 리렌더링 막기)
📸 스크린샷 (선택 사항)
변경 사항에 대한 스크린샷이 있다면 첨부해주세요.
✅ 셀프 체크리스트
이슈 번호: #98