AI 요약관련 정보

• 리액트 서버 컴포넌트(RSC)는 JS 번들 사이즈를 줄여 웹 성능을 최적화하는 데 효과적입니다. 🚀
• 실무에서 RSC를 선언하는 핵심 기준은 'use client'를 가능한 한 가장 하위(리프 노드) 컴포넌트에 선언하는 것입니다. 🌿
• 훅(Hooks)을 사용하거나 사용자 이벤트 핸들러(클릭, 입력 등)를 포함하는 컴포넌트는 반드시 클라이언트 컴포넌트여야 합니다. 🖱️
• 성능 최적화를 위해 훅과 이벤트 핸들러를 가능한 한 가장 하위 컴포넌트로 이동시키고, 상위 컴포넌트는 서버 컴포넌트로 전환해야 합니다. ⬇️
• 예시 리팩토링을 통해 상위 Widget과 AssigneeList를 서버 컴포넌트로, AssigneeItem과 AssigneeForm만 클라이언트 컴포넌트로 만들었습니다. 🔄
• next-bundle-analyzer를 사용하여 JS 번들 사이즈를 측정할 수 있으며, 리팩토링 후 4.65KB에서 3.3KB로 번들 사이즈가 감소했습니다. 📉
• 선택된 담당자 정보와 같은 상태를 URL 검색 파라미터로 관리하면, 상위 컴포넌트(예: Widget)를 훅 없이 서버 컴포넌트로 유지할 수 있어 RSC 적용이 용이해집니다. 🌐