AI 요약관련 정보

• React Router의 RSC 지원: React Router가 React Server Components(RSC)에 대한 실험적/프리뷰 지원을 도입하여, Next.js의 강력한 대안으로 부상하고 있습니다. 🚀
• 실험적 단계: 현재 RSC 지원은 실험 단계에 있으며, 표준 npm install react-router 대신 특정 실험 버전을 설치해야 합니다. 🧪
• Remix 통합의 시너지: React Router v7부터 Remix 프레임워크가 통합되어 풀스택 앱 개발을 위한 "프레임워크 모드"를 제공하며, RSC 지원은 이 프레임워크 모드에 적용됩니다. 🤝
• 두 가지 RSC 활용 방식:
  • 로더/액션에서 JSX 반환: 기존 로더 또는 액션에서 서버 렌더링된 JSX(RSC 콘텐츠)를 반환하여 쉽게 통합할 수 있습니다. 🔄
  • 전용 서버 컴포넌트 라우트: Next.js처럼 처음부터 서버 컴포넌트로 구성된 라우트를 구축할 수 있으며, 이는 ServerComponent라는 이름 규칙을 따릅니다. 🏗️
• use client 지시어: use client 지시어를 사용하여 클라이언트 컴포넌트를 명시하고, useState와 같은 React Hooks를 활용할 수 있습니다. 🖥️
• use server 지시어 (서버 함수/액션): use server 지시어를 통해 클라이언트에서 호출할 수 있는 서버 전용 함수(서버 액션)를 정의할 수 있습니다. ⚙️
• 미들웨어 지원: React Router는 이미 미들웨어(v7.3부터)를 지원하며, 이는 RSC와 함께 인증 등 다양한 용도로 활용될 수 있습니다. 🛡️
• Vite 미지원: 현재 RSC 지원은 Vite 기반 앱에서는 사용할 수 없으며, 이는 Vite에 내장된 RSC 번들러 지원이 없기 때문입니다. (대신 Parcel 사용) 🚧
• 데이터 페칭 유연성: 데이터를 서버 컴포넌트 내에서 직접 페칭하거나, 기존 React Router의 로더 함수를 통해 페칭하는 두 가지 방식을 선택할 수 있습니다. 📊
• ServerComponent 명명 규칙: 서버 컴포넌트 라우트는 ServerComponent라는 함수 이름으로 정의되며, 기본 내보내기(default export)를 사용하지 않습니다. 🏷️
• 관련 서적 정보: 발표자의 저서 "React Key Concepts" 2판에서 React Router 및 RSC에 대한 심층적인 내용을 다룹니다. 📚