프로젝트 캠프 : Next.js 2기 - 2,3주 회고

 

Learned

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

• 서버 컴포넌트 (RSC: React Server Component)
  • 데이터 페칭 역할.
  • async 함수를 기본으로 사용할 수 있음.
  • use client 키워드 없이 작성된 컴포넌트는 기본적으로 서버 컴포넌트.
  • 클라이언트 컴포넌트 아래에는 존재할 수 없음. 만약 클라이언트 컴포넌트 아래에 위치하면 더는 서버 컴포넌트로 작동하지 않음.
• 클라이언트 컴포넌트 (RCC: React Client Component)
  • 사용자와의 상호작용을 처리 (예: 버튼 클릭, 상태 관리 등).
  • useState, useEffect 같은 클라이언트 훅 사용 가능.
  • use client 키워드를 명시해야 클라이언트 컴포넌트로 동작.
  • 초기 렌더링은 서버에서 진행되지만, 이후 클라이언트 사이드에서 하이드레이션.
  •  

---

2. 컴포넌트 설계 전략

• 컴포넌트 트리 구성
  • 서버 컴포넌트를 트리의 상위에 배치하여 최대한의 성능 최적화를 활용.
  • 클라이언트 컴포넌트는 트리의 하위(리프 노드)에 배치.
  • 서버 컴포넌트는 데이터 페칭 및 초기 렌더링을 담당하고, 클라이언트 컴포넌트는 필요한 동적 상호작용을 처리.

---

3. 시스템 파일 구조

1. layout.tsx
   • 특정 경로를 감싸며 상위 구조를 담당.
   • 각 경로별로 중첩 가능.
   • children 필수 삽입.
   • 공통 레이아웃 관리에 활용.
2. page.tsx
   • 라우트의 개별 페이지를 구성.
   • 필요한 경우 레이아웃과 독립적으로 메타데이터를 관리.
3. not-found.tsx
   • 404 페이지 커스터마이징.
4. error.tsx
   • 경로별로 에러를 처리.
   • error boundary 기능 내장.
5. global-error.tsx
   • 전체 애플리케이션의 전역 에러 처리.
   • 프로덕션 모드에서만 활성화.
6. loading.tsx
   • 로딩 상태 시 사용자 경험 향상을 위한 처리.

---

4. 데이터 페칭 및 로딩

• 서버 컴포넌트
  • 렌더링되기도 전에 데이터 페칭을 하기 떄문에 데이터 페칭 시 깜빡임 없음.
  • 초기 데이터를 빠르게 렌더링.
• 클라이언트 컴포넌트
  • 클라이언트에서 데이터를 요청하므로 깜빡임이 발생 가능.
  • loading.tsx를 사용하여 로딩 화면 표시.

---

FAQ

• Q: 공통 사항은 layout에 넣는 것이 좋은가, page에 넣는 것이 좋은가?
  • 공통 요소는 layout에 배치하여 중복을 줄이고 관리 용이성을 높임.
  • 개별 페이지의 특화된 UI는 page에서 처리.
• Q: Next.js에서 error boundary를 따로 작성해야 하나요?
  • 별도 작성 필요 없음. error.tsx 또는 global-error.tsx로 처리.
• Q: use client 키워드를 언제 사용해야 하나요?
  • 사용자 상호작용 또는 클라이언트 훅을 사용하는 컴포넌트에서만 사용.