[Final Project] next.js에서 커스텀훅 사용 시 주의할 점

Error: (0 , _hooks_useChatSessionWEBPACK_IMPORTED_MODULE_1.default) is not a function

문제점

서버 컴포넌트에서 클라이언트 컴포넌트인 커스텀 훅을 가져와 사용할 시 함수가 제대로 작동하지 않는 오류

리액트훅을 사용하는 커스텀 훅을 서버 컴포넌트 page.tsx에서 바로 사용하려고 했을 때 해당 훅이 함수가 아니라는 오류가 떴다. 커스텀 훅을 사용하는 컴포넌트에서만 “use client”를 사용하고 해당 기능을 사용하는 별도로 “use client”를 추가해주지 않아도 컴포넌트에서 사용이 가능하다고 생각해서 정확히 어떤 오류인지 파악하지 못하고 있었다.

시도 1 : 유저 인터렉션이 일어나는 button 주석처리하기

사용자 인터렉션이 필요할 경우 클라이언트 컴포넌트에서 사용해야한다는 내용이 생각나, 해당 훅을 사용하는 button을 주석처리하여 오류가 해결되는지 확인해봤지만 여전히 같은 오류가 떴다.

시도 2 : “use client” 추가하여 클라이언트 컴포넌트로 만들어주기

….!
“use client”를 추가하니 오류가 해결됐다.

보통 “use client”를 사용하지 않아 생기는 오류에는 해당 내용이 들어있어서 쉽게 파악할 수 있었는데, 이번에는 관련 내용이 나와있지 않아 전혀 예상하지 못했던 문제였다.

그래서 결국 해당 함수를 사용하는 button을 따로 컴포넌트로 분리해주어 해당 컴포넌트에서 “use client”를 사용하고, page.tsx에서는 서버 컴포넌트를 유지할 수 있도록 수정해줬다.

결론

클라이언트 컴포넌트로 작성된 커스텀 훅을 컴포넌트에서 사용할 때는 반드시 “use client”를 같이 사용해준다.

import SessionBtn from "./_components/SessionBtn";
import SessionsChat from "./_components/SessionsChat";

const ChatPage = () => {
  return (
    <div>
      <h1>Chat Sessions</h1>
      <div className="flex flex-col">
        <SessionBtn aiType="assistant" />
        <SessionBtn aiType="friend" />
      </div>
    </div>
  );
};

export default ChatPage;

"use client";
import useChatSession from "@/hooks/useChatSession";
import { AIType } from "@/types/chat.session.type";

const SessionBtn = ({ aiType }: { aiType: AIType }) => {
  const { createSession } = useChatSession(aiType);

  const aiTypeText = aiType === "assistant" ? "Assistant" : "Friend";
  return (
    <>
      <button onClick={() => createSession(aiType)}>New {aiTypeText} Chat</button>
    </>
  );
};

export default SessionBtn;