React 18 이후 Next.js에서는 컴포넌트가 실행되는 위치(서버/클라이언트)를 명시해야 합니다. 이 단계에서는 왜 두 가지가 필요한지, 그리고 어떤 컴포넌트가 어디에 속하는지 개념을 정리합니다.

1-1. 서버 컴포넌트와 클라이언트 컴포넌트의 차이

서버 컴포넌트 (Server Component)

• 서버에서 실행되어 HTML 문자열을 생성합니다.
• useEffect, useState, 이벤트 핸들러(onClick)를 사용할 수 없습니다.
• 데이터베이스에 직접 접근할 수 있습니다.
• 번들 사이즈가 0입니다 (클라이언트로 전송되는 JS 코드가 없음).

클라이언트 컴포넌트 (Client Component)

• 브라우저에서 실행됩니다.
• useEffect, useState, 이벤트 핸들러를 사용할 수 있습니다.
• 서버에서 데이터를 가져와야 할 때는 fetch를 사용해야 합니다.
• 인터랙션(클릭, 입력)이 필요한 컴포넌트는 반드시 클라이언트 컴포넌트여야 합니다.

1-2. 이번 실습의 구조 설계

우리가 만들 menus/page.tsx는 초기 데이터(전체 메뉴 목록)를 서버에서 가져와야 하므로 서버 컴포넌트로 시작합니다. 하지만 사용자가 카테고리를 클릭하거나 검색어를 입력할 때 데이터를 다시 가져와야 하므로, 이 인터랙션을 처리하는 하위 컴포넌트(MenuList 등)는 클라이언트 컴포넌트로 만듭니다.

✅ 확인

• 서버 컴포넌트는 async 함수를 사용할 수 있고, 데이터베이스에 직접 접근할 수 있다.
• 클라이언트 컴포넌트는 'use client' 지시어가 필요하고, useState와 useEffect를 사용할 수 있다.
• 인터랙션(클릭, 입력)이 필요한 컴포넌트는 클라이언트 컴포넌트여야 한다.

🎓 newlec 쌤의 코멘트

많은 분들이 "React는 클라이언트에서 돌리는 거 아닌가?"라고 묻습니다. Next.js App Router에서는 기본값이 서버 컴포넌트입니다. 서버 컴포넌트는 서버에서 실행되어 HTML을 만들어 클라이언트로 보내므로, 초기 로딩 속도가 빠르고 보안이 좋습니다. 하지만 사용자가 버튼을 누르는 순간, 서버는 그 이벤트를 알 수 없습니다. 그래서 "사용자가 뭔가 할 때" 반응해야 하는 컴포넌트만 'use client'를 붙여 클라이언트로 내려보냅니다. 이 경계를 잘 잡는 것이 Next.js 실력의 핵심입니다.

📝 이 단계의 핵심

• 서버 컴포넌트: 데이터 가져오기, HTML 생성.
• 클라이언트 컴포넌트: 상태 관리, 이벤트 처리.

---