인프런 커뮤니티 질문&답변
작성한 질문수
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
작성
·
44
0
아래 코드와 같이 template.tsx에서 서버fetch 후 사용처인 클라이언트 컴포넌트로 props 넘겨주도록 세팅해놓았습니다.
//template.tsx 자식 컴포넌트
export default async function Sidebar() {
const { isSucceed, body } = await getUserGetInfo(params);
return (
<SidebarLayout>
<GiftIcon isNewGift={!!body?.info.new_gift} />
'use client'
export default function GiftIcon({ isNewGift }: { isNewGift: boolean }) {
const { onClose } = useModal('SIDEBAR');
return (
<Link
className={isNewGift ? cn(st['active']) : ''}
///
<Icon type="Present" title="선물함" w={25} h={25} />
이 상태에서 next 페이지 이동 시 서버fetch는 리렌더링 되는것을 확인했는데
이상하게 클라이언트는 리렌더링이 되지 않습니다. 즉 서버 응답값은 상태가 바뀌어도 클라이언트 상태값은 바뀌지 않더라구요... 왜 이런걸까요ㅠㅠㅠ
답변 2
0
안녕하세요. 어떤 props(또는 state) 말씀하시는 걸까요? 그걸 console.log 찍어보시면 서버쪽과 클라이언트 쪽에서 둘 다 콘솔에 기록될 것입니다. 생각치도 못했던 리렌더링이 있을 수 있어서 한 번 찍어보시면 좋습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 변재정님.
Next.js와 React Query를 사용하는 과정에서 서버로부터 가져온 값을 클라이언트 컴포넌트의 상태와 동기화하는 부분에서 어려움을 겪고 계신 것 같습니다.
이 문제는 클라이언트 컴포넌트가 서버에서 받은 값의 변경 사항을 인식하지 못하는 것에서 발생합니다. 서버에서 가져온 데이터를 클라이언트에서 제대로 사용할 수 있도록 하려면 몇 가지 방법을 고려할 수 있습니다.
클라이언트 측 상태 관리 사용: 서버에서 받은 데이터를 클라이언트 측 상태로 관리하여 상태 변화에 따른 컴포넌트 리렌더링을 유도할 수 있습니다. React의 상태를 직접 사용하거나,
useEffect훅을 사용하여 서버에서 불러온 데이터를 클라이언트에서 관리합니다.React Query의
useQuery이용: 이미 서버로부터 데이터를 받아왔더라도 클라이언트 사이드에서useQuery를 활용하면 클라이언트가 데이터의 변화를 감지하여 컴포넌트를 자동으로 리렌더링합니다.데이터 페칭 중복 방지: 만약 서버 데이터를 페이지 전환마다 새로 패치하고 싶지 않다면,
useSWR혹은useQuery와 같은 라이브러리를 사용하여 클라이언트에서 캐싱 및 데이터 페칭 상태를 관리합니다.
관련해서 이미 논의된 오해를 줄이기 위해 이미 충분한 Q&A가 있었는지 확인해 주세요:
- SSR의 state 초기화 관련 질문입니다.: 이 게시물에서는 Next.js에서 SSR을 사용할 때 상태 초기화로 인한 불일치에 대해 논의합니다. 같은 흐름에서 고민의 실마리를 찾으실 수 있을 것입니다.
- 리액트 쿼리로 변경 후 질문있습니다.: 서버에서 받는 응답과 클라이언트의 비동기 처리 문제에 대한 토론도 확인해 보세요.
위 방법들 중 하나 혹은 여러 개를 적용하여 문제가 해결되기를 바랍니다. 도움이 필요하시다면 추가적으로 질문해 주시기 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
아 제가 착각했습니다. 정상적으로 클라이언트 상태값 읽는거 확인했습니다😅
답변 감사합니다!!