인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

simhs7831's profile image
simhs7831

asked

Next + Create a SNS service with React Query

Building repost and reply features with zustand

재게시 관련 궁금한 사항

Written on

·

87

0

재게시를 클릭하면 Reposts 부분과 count부분을 수정하고 unShift함수를 사용해서 pages[0]에 글정보를 추가하게 되는데

재게시를 클릭할 때 마다 pages[0]에 {user:{},Original:{}} 부분이 계속 추가되는게 맞나요 ?

인피니트쿼리는 한 페이지당 최대 10개의 객체를 받아오는 것으로 알고있는데 인피니트 쿼리랑은 상관 없는건가요 ?

reactnext.jsreact-querynext-authmsw

Answer 4

0

simhs7831님의 프로필 이미지
simhs7831
Questioner

하나 더 궁금한게 있습니다. 아래 코드는 액션버튼의 리포스트 함수 내에 코드인데 리포스트한 게시물의 값을 변경하기 위해 얕은복사를 해줬는데 value.pages / value.pages[pageIndex] 의 값을 재할당 하는게 아니라 shallow.pages 와 shallow.pages[pageIndex] 에 얕은 복사한 값을 넣어줘야 하는거 아닌가요 ?

 

const shallow = { ...value };
                            value.pages = { ...value.pages };
                            value.pages[pageIndex] = [...value.pages[pageIndex]];
                            shallow.pages[pageIndex][index] = {
                                ...shallow.pages[pageIndex][index],
                                Hearts: [{ userId: session?.user?.email as string }],
                                _count: {
                                    ...shallow.pages[pageIndex][index]._count,
                                    Hearts: shallow.pages[pageIndex][index]._count.Hearts + 1,
                                },
                            };
zerocho님의 프로필 이미지
zerocho
Instructor

아 네네 맞습니다. 오타입니다.

0

simhs7831님의 프로필 이미지
simhs7831
Questioner

A아이디에서 재게시한 글이 B에도 재게시한 글이라고 보이는 거 정상인가요 ?

zerocho님의 프로필 이미지
zerocho
Instructor

B의 글을 A가 재게시한 경우에는

A의 프로필 화면에서 B의 글 위에 A가 재게시한 글이라고 떠야합니다.

B가 A의 프로필을 방문했다면 그렇게 뜰 수 있습니다.

0

zerocho님의 프로필 이미지
zerocho
Instructor

추가되는 게 맞습니다. 저희가 수동으로 수정하는 거라 일시적으로 11개 12개가 들어가있을 수 있습니다.

0

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

심현석님, 질문 주신 내용은 Repost 기능을 구현할 때 발생할 수 있는 페이지 관리와 관련된 문제입니다.

Repost 기능을 사용할 때 useInfiniteQuerypages 배열의 첫 번째 요소에 데이터를 추가하기 위해 unShift 함수를 사용한다고 하셨습니다. 이 경우, pages[0]가 계속 갱신되면서 원래 데이터와 함께 새로운 repost 데이터가 추가될 수 있습니다.

이러한 동작은 useInfiniteQuery의 데이터 처리 방식을 이해하고 계획적으로 사용되어야 합니다. unShift로 데이터를 추가하게 되면 기존의 페이지 데이터 구조에 영향을 미칠 수 있습니다. 이는 무한 스크롤 로직과 별개로, 재게시 기능 시의 데이터 추가 방식에 관한 문제로 볼 수 있습니다.

리액트 쿼리의 페이지 구조를 이해해야 하는 이유는 다음과 같습니다:
- useInfiniteQuery는 기본적으로 커서 기반 혹은 페이지 기반의 데이터 페칭을 효율적으로 처리하기 위한 구조입니다.
- 한 페이지당 최대 10개의 객체를 불러오는 것은 특정 구현에 따라 달라질 수 있지만, 일반적인 경우 이러한 구조를 유지하면서 추가 데이터를 처리하는 것이 중요합니다.

재게시 시 pages 내의 데이터를 직접 조작하기보다는, 새로운 데이터를 관리하는 별도의 상태나 로직을 구현하는 것이 좋습니다. 이 방법을 통해 기존 페이지 로직을 방해하지 않으면서도 새로운 데이터 처리가 가능합니다.

아래 링크에서 무한 스크롤과 관련된 추가적인 정보를 확인할 수 있습니다. No relevant URLs may suffice, hence it’s categorized under a general solution guidance:
- 무한스크롤 구현 시 문제 해결 과정

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

simhs7831's profile image
simhs7831

asked

Ask a question