[Error] Functions cannot be passed directly to Client Components

결론

: Server Components가 Client Component에게 전달 할 수 있는 값은 한정되어 있다.

 

에러메세지

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  {Icon: function y, onClick: undefined}

 

해결책

문제가 생긴 Server Component 상단에 "use client" 를 붙여준다.
or 해당 props를 넘겨주지 않도록 구조를 바꾼다.

 

상황

요약

: Server Component가 Client Component에게 전달할 수 있는 데이터 타입은 정해져 있다.

 

자세히 설명하자면

page.tsx

 

원래는 ServerComponent였던 CreatePlanButton

 

- CreateButton의 Icon props는 JSXElementConstructor 이다.

= 서버 컴포넌트(CreatePlanButton)가 클라이언트 컴포넌트(CreateButton)으로 JSXElementConstructor  타입은 넘겨줄 수 없다.