[요약] Part 2. 화면을 구성하는 Next.js와 React 기초

Part 2. 화면을 구성하는 Next.js와 React 기초의 핵심 내용을 정리하고 복습하는 요약 회차입니다.

Part 2에서 다룬 React 컴포넌트 생태계와 Next.js 코어 아키텍처를 요약합니다.

export default function Board() {
  return (
    <div>
      <PostList />
      <CommentForm />
    </div>
  );
}

화면을 세밀하게 조립하는 블록: 컴포넌트, Props, State

거대한 페이지를 한 번에 찍어내지 않고, 작고 독립적인 부품을 조립하여 완성합니다.

개념: 버튼, 입력창, 네비게이션 바 등을 각각 독립된 자바스크립트 함수로 쪼갠 단위.
AI 프롬프트 팁: "게시판 전체를 만들어 줘" 대신, "글 목록 컴포넌트와 댓글 입력 컴포넌트를 분리해서 만들어 줘"로 세밀하게 지시할 것.

Next.js에서 가장 에러가 자주 발생하는, 가장 중요한 두 컴포넌트의 역할 분담입니다.

선언: 파일 최상단에 마법의 주문 `'use client'` 선언 필수.
역할: 브라우저 상에서 동작하며 사용자와 실시간 상호작용 처리.
사용 타이밍: `onClick` 등 이벤트 리스너가 필요하거나, `useState` 등 동적 상태 관리가 필요할 때 사용. (선언 누락 시 치명적 에러 발생)

상황	선택	이유
서버에서 데이터만 읽어 정적으로 화면에 뿌려줄 때	서버 컴포넌트 (지시어 없음)	무거운 코드가 유저에게 전송되지 않아 성능이 압도적으로 빠름
클릭(onClick)이나 상태 변화(useState) 등 조작이 수반될 때	클라이언트 컴포넌트 ('use client' 명시)	지시어 누락 시 이벤트 리스너 인식 불가로 화면 멈춤 에러 발생

복잡한 설정 파일 없이 폴더 트리만으로 URL과 통신을 조작합니다.

App Router 규칙: 폴더의 이름과 배치 구조가 곧 브라우저 URL이 됨.
정적 라우팅: `app/profile/settings/page.tsx` ➜ `도메인.com/profile/settings` 접속.
동적 라우팅: `app/products/[id]/page.tsx` ➜ 대괄호를 사용해 수천 개의 유동적인 상품 주소 번호를 한 번에 처리.

퀴즈 답을 맞춰야 학습 완료가 됩니다.

다음 중 Next.js의 서버 컴포넌트와 클라이언트 컴포넌트 생태계에 대한 설명 중 가장 정확한 것은 무엇입니까?