[React-query] refetch와 invalidate의 차이

1. refetch와 invalidate의 차이React Query에서 데이터 쿼리를 관리하는 두 가지 주요 방법은 refetch와 invalidate입니다. 이 둘은 쿼리 데이터를 갱신하는 방식에서 중요한 차이를 보입니다.refetch는 강제로 데이터를 다시 가져오는 동작을 수행합니다. 즉, 호출되면 조건과 상관없이 데이터를 서버로부터 새로 불러옵니다.반면, invalidate는 쿼리 데이터를 "stale"으로 표시하고, 이 쿼리를 관찰하는 컴포넌트가 마운트될 때 데이터를 다시 가져오도록 합니다. 이렇게 하면 불필요한 네트워크 요청을 줄일 수 있습니다.2. refetch의 특징refetch는 사용자가 명시적으로 쿼리를 다시 실행하고자 할 때 유용합니다. 예를 들어, 사용자가 데이터를 최신 상태로 갱신하..

• format_list_bulleted React
• · 2024. 6. 7.
• textsms

React-query, SWR을 사용해야하는 이유. 엄격 모드

카카오 로그인을 구현하기 위해서 코드를 작성하고 있는데, 예상치 못한 부분에서 오류가 났습니다. 카카오톡 로그인은 위와 같은 과정으로 구현할 수 있습니다. 카카오 로그인에 대한 자세한 내용은 아래 공식문서를 참조하세요! Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 오류가 왜 났는지 결론부터 말씀드리자면, 인가코드로 토큰을 요청하는데 Strict-Mode 때문에, fetch 요청이 두 번 이루어 지게 되면서 오류가 난 것이었습니다. const Auth = () => { const params = useSearchParams(); const co..

• format_list_bulleted React
• · 2024. 1. 15.
• textsms

[React] SWR이 무엇인가요?

우선 SWR을 알아보기 앞서 캐시에 대해서 알아보겠습니다. ❓캐시란 무엇인가 캐시는 데이터를 일시적으로 저장하는 메모리를 가리키는 용어입니다. 한 번의 요청에 비용이 큰 경우, 여러 번 요청을 하는 것 보다, 한 번의 요청 이후 캐시에 저장하여 재사용 하기 위한 전략입니다. ❓SWR이 무엇인가 SWR은 Stale-While-Revalidate의 약자로 HTTP 캐시 무효 전략을 뜻합니다. SWR은 우선적으로 캐시로 부터 데이터를 반환한 후, fetch 요청(Revalidate)이 필요한지 확인하고 요청을 합니다. 즉 캐시에 있는 데이터로 처리할 수 있다면, 굳이 요청을 하지 않는 것이죠. 그리고 반대로 사용자가 원하는 순간에 요청을 보내 새로 데이터를 받을 수 있습니다. 이를 통해 컴포넌트는 지속적으로 ..

• format_list_bulleted React
• · 2023. 11. 24.
• textsms