Next.js의 서드파티(타사제품) 사용법

서버 컴포넌트와 클라이언트 컴포넌트는 React의 새로운 기능이라, 많은 타사 패키지들이 아직 "use client" 지시어를 추가하지 않은 상태예요. "useState", "useEffect", "createContext"와 같은 클라이언트 전용 기능을 사용하는 컴포넌트들은 클라이언트 컴포넌트 안에서만 작동하고, 서버 컴포넌트에서는 작동하지 않아요.

예시

acme-carousel이라는 패키지를 설치했다고 가정해봐요. 이 패키지에는 <Carousel /> 컴포넌트가 있어요. 이 컴포넌트는 useState를 사용하지만 아직 "use client" 지시어가 없어요.

• 클라이언트 컴포넌트 내에서 사용

'use client';
import { useState } from 'react';
import { Carousel } from 'acme-carousel';

export default function Gallery() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>View pictures</button>
      {/* Carousel을 클라이언트 컴포넌트 내에서 사용하기 때문에 작동해요 */}
      {isOpen && <Carousel />}
    </div>
  );
}

 

• 서버 컴포넌트 내에서 사용
• Next.js는 <Carousel />이 클라이언트 전용 기능을 사용하고 있다는 걸 알 수 없기 때문에 에러가 발생해요.

import { Carousel } from 'acme-carousel';

export default function Page() {
  return (
    <div>
      <p>View pictures</p>
      {/* 에러 발생: `useState`는 서버 컴포넌트 내에서 사용할 수 없어요 */}
      <Carousel />
    </div>
  );
}

해결 방법

서버 컴포넌트 안에서 사용할 수 있도록 클라이언트 컴포넌트를 감싸는 방법이 있어요:

1. 클라이언트 컴포넌트를 감싸기

'use client';
import { Carousel } from 'acme-carousel';
export default Carousel;`

2. 서버 컴포넌트 내에서 사용

 

import Carousel from './carousel';

export default function Page() {
	return ( 
    <div> <p>View pictures</p>     {/* 이제 Carousel을 서버 컴포넌트 내에서 사용할 수 있어요 */}
    <Carousel />
    </div> );
    }

 

일반적으로 대부분의 타사 컴포넌트는 클라이언트 컴포넌트 내에서 사용될 것이기 때문에, 특별한 처리가 필요 없을 거예요. 그러나 React 상태와 컨텍스트를 사용하는 제공자(provider)는 예외로, 애플리케이션의 루트에서 필요할 수 있어요.