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

안녕하세요 김재홍님 이정환입니다.

우선 질문을 제가 제대로 이해했는지부터 확인해보겠습니다.

"createTodo의 리턴값을 활용하면서 Todo를 생성했을 때, 캐시 무효화를 해서 데이터가 많은 경우 서버에 부하를 주는 코드를 개선했었었는데"

위 질문은 useCreateTodoMutation의 onSuccess 이벤트 핸들러에서 발생한 일을 말씀하신게 맞을까요?

추가로 invalidateQueries 함수를 호출한 onSettled가 useUpdateTodoMutation의 이벤트 핸들러를 말씀하시는 걸까요?

위 두개가 맞다면 네, 말씀하신 방향이 맞습니다. useUpdateTodoMutation처럼 체크박스 토글처럼 “특정 Todo 하나만 바뀌는” 상황에서는 전체 리스트 캐시(QUERY_KEYS.todo.list)를 매번 invalidateQueries로 날려서 다시 받아오는 것보다, 지금 코드처럼 해당 Todo의 캐시만 딱 집어서 수정(setQueryData) 해주는 방식이 훨씬 효율적입니다. 네트워크 요청도 줄고, 데이터가 많아질수록 성능/UX 측면에서 이점이 커집니다.

다만 지금 단계에서는 데이터가 완전히 “정규화”되어 있지 않다 보니, 리스트 캐시와 개별 캐시를 동시에 깔끔하게 유지하려면 조금 불편한 지점이 생길 수 있습니다. 그래서 강의에서는 우선 토글처럼 단순한 케이스는 “부분 업데이트”로 처리하고, 이후에 정규화 전략으로 캐시를 더 안정적으로 관리하는 방식을 다루게 됩니다. 정규화 전략은 4.12, 4.13 챕터에서 다루니 뒷 내용까지 수강하시면 좋을 것 같습니다.

안녕하세요, 인프런 AI 인턴입니다. 김재홍님
질문하신 내용은 낙관적 업데이트 후 데이터 무결성을 유지하기 위한 처리에 대한 것입니다.

캐시 무효화와 서버 부하

queryClient.invalidateQueries는 모든 관련 캐시를 무효화하고, 서버에서 다시 데이터를 받아와 업데이트를 수행합니다. 데이터 무결성을 보장하기 위해 매우 중요한 작업입니다. 하지만 데이터를 많이 다뤄야 하는 경우 서버 부하가 증가할 수 있습니다.

개선을 위한 대안

낙관적 업데이트에서는 두 가지 옵션을 고려할 수 있습니다:

1. 로컬 데이터 업데이트:

   • 낙관적으로 업데이트된 데이터를 캐시에 반영하여, 서버 요청 횟수를 줄일 수 있습니다. 업데이트된 데이터를 사용해 setQueryData를 활용하여 명시적으로 캐시를 갱신하는 방법이 있습니다.
     

2. 배치 처리:

   • 여러 데이터의 변화를 한번에 처리할 수 있도록 백엔드에서 배치 업데이트를 구성할 수 있습니다. 이는 서버로의 요청 횟수를 줄여 성능 향상에 도움이 됩니다.
     

관련하여 유사한 주제를 다룬 강의 질문이 있습니다. 아래 링크를 참고하시어 좀 더 구체적인 해결책을 찾을 수 있을 것입니다.

• React Query를 활용한 낙관적 업데이트와 데이터 무결성 유지
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.