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

일단 근본적으로 왜 zustand에서 관리하시나요?? 그냥 서버에서 불러온 데이터 그대로 쓰시면 안 되나요? 서버 데이터는 http 캐싱해 두시고요.

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

게시판 리스트 렌더링 시 어떤 방식이 더 나은지에 대한 고민이시군요. Next.js에서는 사용하는 use client 위치와 Zustand 등을 어떻게 활용할지에 대한 결정은 상황에 따라 다양하게 이루어질 수 있습니다. 아래에서 두 접근 방식에 대해 몇 가지 고려사항을 공유드리겠습니다.

1. 리스트 단에서 use client 사용하는 방법:

   • 장점: 리스트 전체를 하나의 상태로 관리하기 때문에 전체 데이터 흐름을 쉽게 파악할 수 있고, 데이터 일관성을 유지하기가 용이합니다. 이는 특히 상태가 복잡한 경우 유용할 수 있습니다.
     
   • 단점: 한 항목이 업데이트될 때 전체 리스트가 재렌더링될 수 있다는 점 때문에 성능 면에서 비효율적일 수 있습니다.
     

2. 각각의 레코드에서 use client 사용하는 방법:

   • 장점: 개별 레코드가 자체적으로 업데이트되도록 하여 최적화된 렌더링이 가능합니다. 필요한 데이터만 관리할 수 있어, 반응성과 성능이 개선될 수 있습니다.
     
   • 단점: 상태 관리가 다소 복잡해질 수 있으며, 특히 상태를 공유해야 하는 경우 추가적인 로직이 필요할 수 있습니다.
     

일반적인 구현 방식

일반적으로, 결과적으로 변동성이 큰 데이터를 개별 컴포넌트 수준에서 관리하여 성능상 이점을 취하면서도, 리스트의 전체 상태를 필요에 따라 적절히 활용하는 것이 바람직합니다. 특히 대규모 리스트를 다루거나 변동성이 자주 발생하는 경우, 각각의 아이템을 개별 client 컴포넌트에 둬 최적화된 상태 관리를 합니다.

• SEO 역시 중요한 고려사항이며, 필요한 경우 서버 측에서 초기 데이터 페칭 후 클라이언트 측에서 상태를 부분적으로 업데이트하는 기법을 고려할 수 있습니다.
  

관련된 질문으로 동일 코드베이스에서 상태 관리를 어떤 식으로 구분하는지에 대한 Zustand를 context, provider없이 사용하신 이유가 궁금합니다 게시글에서 사용자들이 어떻게 상태를 처리하고 있는지 답변을 활용해보시길 추천합니다.

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