Today

프로젝트

• 채팅 목록 : 마지막 메시지 렌더링
  

• 마이페이지 : 모바일 작업
  

---

Learn

TroubleShooting

문제

Invalid Hook Call Warning 에러 공식 문서

위 공식문서에 따르면 이러한 에러는 3가지 이유를 갖고 있다.

1. You might have mismatching versions of React and React DOM
   : React와 React DOM 버전이 16.8.0 이하의 경우

2. You might be breaking the Rules of Hooks
   : React의 훅 룰을 어겼을 경우

3. You might have more than one copy of React in the same app
   : React나 React package 중복 설치의 경우

원인

✔️ 나의 경우 2번 React 훅 룰을 어겼을 경우

1. 훅 규칙 위반: React 훅은 항상 동일한 순서로 호출되어야 하는데, async로 컴포넌트를 만들면, 해당 컴포넌트가 호출될 때 훅이 조건부로 실행될 수 있어 규칙을 위반

const MyPost = async () => {

  const { data: { session } } = await supabase.auth.getSession();
  	if (session) { 
    	const { data } = await supabase.from("Users").select("*").eq("id", session?.user.id);
	if (data) {
      setMyId(data[0].id);
    }
  }
  
  const getPostsQuery = useQuery({
    queryKey: ["posts", myId],
    queryFn: async () => {
      const posts = await getPosts({ myId });
      return posts;
    },
  });
  
  return ...
}

해결

비동기 작업을 useEffect와 함께 사용

const MyPost = () => {
  const [myId, setMyId] = useState("");
  const [session, setSession] = useState("");
  const supabase = createClient();

  const router = useRouter();

  useEffect(() => {
    const getSessionData = async () => {
      const {
        data: { session },
      } = await supabase.auth.getSession();
      if (session) {
        const { data } = await supabase.from("Users").select("*").eq("id", session?.user.id);
        if (data) {
          setMyId(data[0].id);
        }
      }
    };
    getSessionData();
  }, []);

    const getPostsQuery = useQuery({
    queryKey: ["posts", myId],
    queryFn: async () => {
      const posts = await getPosts({ myId });
      return posts;
    },
  });

  return (...)
}

export default MyPost
  

정리

✅ 함수형 컴포넌트에서 async를 직접 사용하면 React의 훅(Hook) 규칙을 위반하게 되어 "Invalid Hook Call" 에러가 발생할 수 있음

✅ 훅을 사용할 때는 async를 직접 사용하기보다는 useEffect나 useQuery와 같은 React의 훅을 활용

---

주절주절

무엇을 했는지 무엇을 하고 있는지 모르는 정신과 시간의 방에 있는 것 같다;;

그만큼 기록이 중요한데