코드캠프 부트캠프 7일차-2

개발일기·2022년 1월 18일
0

refetchQueries

Query를 다시 Fetch한다는 것으로 useMutation을 한 후 기존에 받아왔던 Query의 데이터가 변경되었을 경우 사용하게 된다.

예를들어, Query로 게시글들의 목록을 10개 불러왔다고 하자.
그런데 Mutation을 통해 하나를 삭제하면 게시글은 9개가 되는데, 이럴 경우 다시 Query를 통해 서버에서 9개 짜리의 데이터를 받아와야 한다.
이때, Mutation에 refetchQueries 기능을 이용하면 위의 예시를 간단하게 작성할 수 있다.

코드를 통해 자세히 알아보자.

위의 코드는 삭제 Mutation이다.
만약 삭제 후에 기존 Query로 받아온 데이터에 삭제된 데이터가 반영되지 않는다면 이때, refetchQueries를 이용해 다시 받아온다.

useMutation 함수 안에서 refetchQueries라는 키가 있는데, 이는 Apollo에서 제공하는 기본 기능이다.
refetchQueries는 배열로 시작하여, 그 안에 어떤 query를 하고, 그 query의 variables가 무엇인지 다시 설정해주면 Mutation이 성공적으로 끝났을 경우 refetchQueries를 실행시켜 준다.

Key


refetchQueries를 사용하고 보니 콘솔이 이상하다.
콘솔창을 자세히 확대해 보니
라고 한다.
왜 이런 메시지가 뜨는지 알아보자.

React에서 Key가 필요한 이유

해당 경고는 React가 어떤 요소를 변경, 추가, 삭제할지 식별하기 위함이다. key가 없는 경우에는 가상DOM을 비교하는 과정에서 순차적으로 비교하며 변화를 감지하는데, key가 있다면 이 값을 사용하여 어떤 것이 수정되었는지 빠르게 감지할 수 있다.
React에서는 기존 데이터와 바뀐 데이터를 비교하여 바뀐 부분을 화면에 출력해주는데 여기서 비교할 때 고유한 key값이 없다면 모든 데이터를 비교해야 하지만, key가 있다면 key값만 비교하여 불필요한 비교나 렌더링을 없애준다.
따라서, key는 안정적인 고유성을 부여하기 위해 중복되는 값이 아닌것으로 지정해 줘야 한다.
Index로 key를 주게 된다면, 다음 내용이 위로 올라오면서 삭제한 index값으로 변경되기 때문에 예상치 못한 오류를 발생시킬 수 있다.

profile
개발자가 꿈이에오

0개의 댓글