refetchQueries 질문

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

08-03-map-boards-delete

해결된 질문

23.07.12 14:16 작성

277

안녕하세요.

강의를 복습하던 도 중 궁금한게 생겨서 질문 드립니다.

onClick={qqq}으로 버튼을 클릭시 5개 정도의 데이터가 refetchqueries 되어야 하는데 모두 다 쓰면 비효율적 인 듯 합니다.

많은 데이터가 refetch되어야 할 때 페이지가 새로고침 되는것이 낫다고 생각 하는데..

1.새로고침을 한다면 어떤식으로 코드를 써야하나요?

2. 둘 중 어느것이 더 효율적일까요.

react node.js seo graphql next.js

답변 2

노원두

지식공유자

2023. 07. 15. 06:09

안녕하세요! 임프런님!
수업을 막연히 따라오는 것이 아닌, 궁금증을 가지면서 따라오시는 자세 정말 좋아요!

실제로 가장 좋은 방법은 변경된 부분만 받아와서, 변경된 부분만 바꿔주는 방법이 가장 좋겠죠?!
해당 주제는 cache 직접 수정이라는 주제로 뒷 부분에서 다루고 있답니다!

아직 cache 직접 수정 방법을 배우기 이전이므로, 쉬운 방법으로는 크게 2가지 새로고침과 refetchQueries에 대해서 생각해 볼 수 있어요!

여기서 새로고침이라 하면, 실제 데이터뿐만 아니라 html, css, js, 데이터를 포함하여 모든 파일들을 다운로드 받아와서 그려줘야 하기 때문에 추천드리진 않습니다.
뒷 부분 수업에서 브라우저 성능 최적화를 주제로하는 크리티컬 렌더링 패스에 대해서 다루고 있어요!

따라서, 5개든 10개든 데이터만 새로 받아오는 refetchQueries가 더 효율적이겠죠?!

다시 말씀 드리지만, refetchQueries는 최선이 아니며 뒷부분 수업에서 cache 직접 수정하는 방법을 배우시게 됩니다!^^

인프런 AI 인턴

2023. 07. 14. 14:21

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

질문하신 내용에 대해 안내드리겠습니다.

새로고침을 한다면 어떤식으로 코드를 써야하나요?
새로고침을 하려면 JavaScript의 location 객체를 이용하여 페이지를 새로고침하는 메소드인 reload()를 사용하시면 됩니다. 예를 들면 아래와 같이 사용할 수 있습니다.

function qqq() {
  // 새로고침
  location.reload();
}

둘 중 어느것이 더 효율적일까요?
데이터를 refetch할 때와 페이지를 새로고침할 때 어떤 방법이 더 효율적인지는 상황에 따라 다를 수 있습니다. 하지만 일반적으로는 페이지를 새로고침하는 것보다 refetchQueries로 데이터를 다시 불러오는 것이 더 효율적입니다. 페이지를 새로고침하면 사용자 경험에 영향을 줄 수 있으며, 필요한 데이터만 refetch하여 업데이트하는 것이 성능적으로 더 좋은 방법입니다.

위의 내용은 일반적인 지침이며, 실제 상황에 따라 다를 수 있으니 상황에 맞게 선택하시면 됩니다.

추가로 궁금한 사항이 있으시면 언제든지 물어보세요. 즐거운 학습되시기 바랍니다.

감사합니다.

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

refetchQueries 질문