인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

우선 Zustand를 활용하는 이유와 "use client"를 선언하시려는 이유가 무엇인가요? 굳이 클라이언트 사이드에서 페칭해야 할 특별한 이유가 없다면 Zustand도 "use client"도 고려할 필요 없이 그냥 모두 서버 컴포넌트로 처리해도 될 것 같습니다.

만약 서버 컴포넌트에서 데이터를 페칭할 경우 Props Drilling이 발생할 것 같아 문제라면 이는 App Router의 Request Memoization 기능을 통해 어느 정도 해결 가능합니다. (강의중 Request Memoization 챕터 참고) 이 기능을 활용하면 하나의 페이지를 이루는 여러 컴포넌트에서 동일한 API를 요청해도 한번의 요청으로 처리됩니다. 이를 통해 데이터가 필요한 곳에서 쉽게 불러다 쓸 수 있습니다.

안녕하세요, 인프런 AI 인턴입니다.

0S 님의 질문에 대한 답변을 드리겠습니다.

게시판 리스트 구성 시, 상태 관리와 클라이언트/서버 컴포넌트 사용에 대한 최적의 접근 방안에 대해 고민하신 것 같아요. 두 가지 접근 방법 모두 각각의 장단점이 있습니다.

1. 리스트 단에서 use client 적용:

   • 장점: 전체 리스트를 zustand로 관리하게 되면 전역 상태 관리가 용이해지고, 데이터의 일관성을 유지하는 데 유리합니다.
     
   • 단점: 리스트 내의 하나의 레코드가 변경되더라도 전체 리스트가 리렌더링 될 수 있어 성능에 영향을 줄 수 있습니다. 특히 사용자가 많은 상호작용을 하지 않는 경우에는 패널티가 될 수 있습니다.
     

2. 각각의 레코드에서 use client 적용:

   • 장점: 각 레코드가 독립적으로 상태를 가지므로, 하나의 레코드만 변경되어도 다른 레코드에는 영향을 미치지 않아 효율적입니다. 이는 로컬 상태의 이점을 극대화하는 방식입니다.
     
   • 단점: 상태가 분산되어 관리가 복잡해질 수 있고, 전역 상태가 필요한 경우 일관성 문제가 생길 수 있습니다.
     

일반적인 구현 방식:
- 구현 방향은 프로젝트의 특성과 요구사항에 따라 달라질 수 있으나 일반적으로 리액트 프로젝트에서 성능과 유지 보수성을 고려할 때는 상태 관리를 컴포넌트 계층 구조와 사용 빈도에 맞춰 결정하는 것이 좋습니다.

추천 전략:
- SEO: 검색 엔진 최적화가 중요한 경우, 서버에서 데이터를 가져와 초기 렌더링에 최대한 활용하고 클라이언트 쪽에서 최소한의 처리를 통해 SEO를 유지하는 것이 좋습니다.
- 스토어 구조: zustand 등을 사용해 전역에서 필요로 하는 상태만 집중 관리하고, 빈번한 UI 업데이트가 필요한 상태는 로컬에서 관리할 수 있도록 구성하는 것이 좋습니다.
- 렌더링 최적화: React.memo 및 기타 렌더링 최적화 기법을 사용해 불필요한 렌더링을 방지하는 것도 고려해 보세요.

관련하여 유사한 토픽이 있는 질문 및 답변을 추천드립니다:
- “클라이언트와 서버 사용 범위 설정하기” - 클라이언트 컴포넌트와 서버 컴포넌트의 활용 방법에 대해 설명하고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.