<aside> ⚠️

Client component는 Server component를 자식으로 가질 수 없다.

hydration 과정에서 JS bundle에는 서버 컴포넌트에 대한 정보를 가지고 있지 않기 때문에, 말하자면 없는 코드를 임포트 하려는 것과도 같다.

</aside>

→ 오류를 반환하지는 않는다. 그냥 서버 컴포넌트를 자동으로 클라이언트 컴포넌트로 바꾼다.

그래도 자식으로 서버 컴포넌트를 받고 싶다면?

<aside> 💡

children으로 전달된 Server component는 Client component로 변경하지 않는다.

</aside>

따라서 직접 import 해서 사용할 수 없으니, Server component을 children으로 받아 우회한다.

// client-component.tsx

"use client"

export default function ClientComponent({ children }: {children: ReactNode}) {
	
	return <div>{children}</div>
}

// page.tsx

export default function Home() {

	return (
		<div>
			<ClientComponent>
				<ServerComponent/>
			</ClientComponent>
		</div>
	)
}