[Next js] use client?! 서버 컴포넌트, 클라이언트 컴포넌트에 대해서 알아보자

Next js에서 컴포넌트를 작성하면

기본적으로 서버 컴포넌트를 작성하게 된다.

 

export default function Cart() {
  return (
    <div>
      <h4 className="title">Cart</h4>
      <CartItem />
      <CartItem />
      <CartItem />
    </div>
  );
}

function CartItem() {
  return (
    <div className="cart-item">
      <p>상품명</p>
      <p>$40</p>
      <p>1개</p>
    </div>
  );
}

 

하지만 서버 컴포넌트는 onClick을 넣거나

react의 useState, useEffect와 같은 코드를 동적으로

실행할 수 없다.

 

그래서 이런식으로 html에 자바스크립트 기능을 넣기 위해서는

클라이언트 컴포넌트로 구현해야 한다.

 

방법은 굉장히 간단하다.

'use client'

클라이언트 컴포넌트로 만들고 싶은 파일의 최상단에

'use client' 한 줄만 추가하면 된다.