[Next.js] 클라이언트 컴포넌트에서 서버 컴포넌트 유지하는 방법

📄 클라이언트 컴포넌트 내에서 서버 컴포넌트 다루기

컴포넌트를 구현할 때마다 여러 난관에 부딪힌 경험이 있습니다.

서버 컴포넌트를 작성한 후에도 이벤트 리스너를 추가하거나 훅을 적용해야 하는 경우, 결국 클라이언트 컴포넌트로 전환해야 했습니다.

여러가지 방법을 찾아보다가 클라이언트 컴포넌트 내부에서도 서버 컴포넌트를 충분히 활용할 수 있다는 점을 발견했습니다.

◾ 서버 컴포넌트를 children으로 받아오기

단순한 방법이지만 큰 차이였습니다. import문으로 컴포넌트를 서버 컴포넌트를 가져오면 클라이언트 컴포넌트로 자동 변환됩니다.

서버 컴포넌트를 children으로 받아오면 클라이언트 컴포넌트를 유지하면서 서버컴포넌트를 사용할 수 있습니다.

'use client'
 
import { useState } from 'react'
 
export default function ClientComponent({
  children,
}: {
  children: React.ReactNode
}) {
  const [count, setCount] = useState(0)
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      {children}
    </>
  )
}

import ClientComponent from './client-component'
import ServerComponent from './server-component'
 
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

이렇게 하면 굳이 전체 컴포넌트를 클라이언트 컴포넌트로 전환할 필요 없이 서버 컴포넌트를 children으로 전달하여 활용할 수 있습니다.

참고

• Next.js 공식 문서 - Server and Client Composition Patterns
• Next.js + ReactQuery로 SNS 서비스 만들기 (인프런)