강의

멘토링

로드맵

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

0S님의 프로필 이미지
0S

작성한 질문수

Next + React Query로 SNS 서비스 만들기

게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다

작성

·

68

0

<리스트>

<레코드1/>

<레코드2/>

</리스트>

 

일 경우…

  1. 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가?

  1. 각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가?

 

레코드에는 좋아요, 조회수 등이 표시됨.

 

제 생각은

1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고

2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데…

 

무엇이 일반적인 구현방식인지 모르겠습니다.

도와주세요 ㅠㅠ

답변 2

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

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

0S님의 프로필 이미지
0S
질문자

답변 진심으로 감사합니다!! 제가 감히 말씀은 못드리겠으나.. 제가 아는바로는

  1. 상태를 관리하지 않으면 말단 컴포넌트까지 계속 속성으로 내려줘야하지 않을까

  2. 최말단에서 서버 값을 불러올 경우, 데이터가 많아지면 계속 서버에서 불러오는 이슈 존재하지 않을까

이 두가지가 걱정되서요!! 제 걱정이 잘못됐거나 감안하는게 맞다면 혹시나 답변해주실 수 있으신가요?

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

  1. 이 경우에는 이걸 회피하기 위해 zustand를 쓰시는 게 맞고요.

  2. 최말단에서 서버 값을 불러온다는게, 레코드 하나 하나 방문할 때마다 서버 값 불러오는 것을 걱정하시는 건가요? 이건 당연히 불러오는 것입니다.

0S님의 프로필 이미지
0S
질문자

많은 도움이 됐습니다. 정말 감사합니다!!

0

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

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

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

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

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

일반적인 구현 방식

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

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

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

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

0S님의 프로필 이미지
0S

작성한 질문수

질문하기