서버 컴포넌트 vs 클라이언트 컴포넌트

: 컴포넌트의 실행환경이 서버인지, 클라이언트인지에 따라 결정됨.

서버 컴포넌트

• alert, confirm처럼 유저와의 상호작용이 필요한 메서드, 기능은 사용할 수 없음
• useEffect, useState처럼 client-side rendering(CSR)을 위해 사용된 기술들도 사용할 수 없음
  [사용예시]
  - fetch data
  - 백엔드 자료 처리할 때
  - 민감한 정보(access token, API key 등)를 유지할 때

클라이언트 컴포넌트

• “use client”;코드를 컴포넌트 최상단에 붙여주기
  [사용예시]
  - 이벤트 핸들러 함수 사용할 때(onClick(), onChange() 등)
  - 상태나 라이프사이클 효과를 줄 때(useState(), useEffect(), useReducer() 등)
  

Next.js의 default는 서버 컴포넌트이다.

꼭 필요한 곳에만 “use client”를 이용해서 클라이언트 컴포넌트로 만들어야 한다.

=> 컴포넌트 분리하기

기본 서버컴포넌트는 그대로 두고,
1. 클라이언트 컴포넌트로 사용해야할 부분은 분리한다.
2. 최상단에 "use client"를 입력한다.
3. 해당 클라이언트 컴포넌트를 서버 컴포넌트에 삽입한다.