문제

// page.tsx
import CheckboxHeadless from "@/components/CheckboxHeadless";

export default async function page() {
  return (
    <div>
      <CheckboxHeadless>
        {({ isChecked, onChange }) => {
          return (
            <label>
              <input type="checkbox" checked={isChecked} onChange={onChange} />
              <span>체크박스</span>
            </label>
          );
        }}
      </CheckboxHeadless>
    </div>
  );
}

React Server Component에서 React Client Component에 props로 Function as Child Component를 넘겨주니 에러가 발생한다.

해결 방법

첫 번째 방법

• page 컴포넌트를 client로 바꾼다.

두 번재 방법

• page 컴포넌트는 server component로 살리고, client component인 자식 컴포넌트를 만들고, 그 안에서 문제의 CheckboxHeadless 컴포넌트를 호출한다.

원인

함수는 Server Component에서 Client Component로 넘겨줄 수 없다. 왜냐하면, Server Component에서 자식 컴포넌트에 넘겨주는 props는 직렬화되어 있어야 하기 때문이다. 함수는 직렬화가 되지 않기에 (실행 컨텍스트 등이 존재) 넘겨줄 수 없다.