Next.js의 번들러는 서버 컴포넌트가 렌더링을 진행하다가 'use client'가 적힌 클라이언트 컴포넌트를 만나면, 더 이상 하위 컴포넌트를 파고들어 렌더링을 하지 않음.
=> Reference Marker만 체킹 후 나머지 서버 컴포넌트들의 렌더링을 진행 함. => 이 후 완성된 RSC Payload가 브라우저로 넘어가게 됨.

☂️ Leaf 컴포넌트 패턴

• 위 렌더링 과정을 가장 효율적으로 사용하는 첫 번째 패턴.
• 나무의 굵은 줄기와 가지(페이지 전체, 레이아웃)는 서버 컴포넌트로 유지, 사용자와 상호작용이 필요한 가장 끝 부분(좋아요 버튼, 모달창 등)들만 아주 작은 클라이언트 컴포넌트로 구현하는 전략.
  => 상호작용이 필요한 부분은 트리의 끝에서!!!

☂️ Composition 패턴

• 'use client' 지시어가 있는 클라이언트 컴포넌트에서 import되는 모든 하위 컴포넌트는 강제로 JS번들에 포함되어 브라우저로 전송됨.
  => 이를 해결하는 유일한 방법이 바로 children 주입 패턴 임.
• 상위 클라이언트 컴포넌트에서 직접 import 하지 않고 Children Props로 넘겨주는 방식.
  => Children Props로 넘겨지는 서버 컴포넌트는 이미 서버에서 렌더링된 결과물인 HTML로 채워져 넘겨지게 됨.
• ex) 클라이언트 컴포넌트(액자) <-> Children Props로 넘겨지는 서버 컴포넌트(끼워지는 사진, 그림) ----> 뭐가 껴지든 상관없음!!!
• 주로 Context API, 외부 라이브러리들의 Provider로써 자주 사용됨.