반응형 react-query4 TanStack Query(react-query) v5 주요 변경점 알아보기 feat. Suspense, ErrorBoundary 📒 react-query v5 주요 변경점 알아보기 새로운 프로젝트에 생각없이 react-query를 설치하고 예전 방식 그대로 사용하려는데 여기저기 오류가 빵빵 터져나갔습니다. 왜이러지 싶어 package.json을 찾아보니 메이저 버전이 업데이트 되었고, 공식문서를 천천히 훑어보니 생각보다 사용 방식이 변경된 것이 많아 주요 변경점들을 짚고 넘어가겠습니다. 📌 hook 옵션 객체 형태로 변경 버전이 올라가며 훅에 옵션을 넣어주는 방식이 객체 형태로 바뀌어 더욱 직관적인 모습을 보입니다. 기존 사용 방식 const { data } = useQuery(['queryKey'], getData); const mutation = useMutation(setData); 변경 후 사용 방식 const { data.. 2024. 3. 13. TanStack Query(react-query), useMutation의 mutationKey 역할은 도대체 뭘까? 📒 react-query v5, useMutation의 mutationKey 역할은 도대체 뭘까? react-query의 메이저 버전이 5로 올라가고 사용방법이 많이 바뀌어서 코드를 수정할 일이 있었습니다. 그저 당연스럽게 공식문서를 보고 바꾸던 중, useMutation을 수정할 때 mutationKey라는 속성이 보였습니다. 저 Key라는 말에 꽂혀 당연히 필수 요소라 생각한 나머지 하나하나 정성스럽게 mutationKey를 작성해 주었습니다. const mutation = useMutation({ mutationKey: ['mutationKey'], mutationFn: updateData }); 그러다 어느 정도 프로젝트 규모가 커질 무렵 어느 순간 문득 다음과 같은 생각이 머리를 스쳤습니다. ".. 2024. 3. 13. [React] react-query, 리액트 쿼리를 사용해야 하는 이유 📒 react-query를 사용해야 하는 이유 리액트에서 상태 관리를 위한 라이브러리는 무수히 많습니다. 대표적으로 redux, recoil 같은 라이브러리가 있는데, 대부분 이러한 상태 관리 라이브러리를 사용하며 클라이언트 상태와 서버 상태를 함께 담아두고 있는 경우가 대부분이고, 또 그럴 수 밖에 없었습니다. react-query를 사용해 서버 상태를 관리한다면 클라이언트 상태를 분리하여 관리할 수 있기 때문에 직관적이고 효율적인 관리가 가능해집니다. 이 외에도 react-query에서 지원하는 다양한 옵션들을 사용해 캐싱, 에러처리, suspense, refresh, data fetching 조건 설정 등등 기존에 불편하게 느꼈던 부분들을 선언적이고 간편하게 이용할 수 있도록 도와줍니다. 그럼 re.. 2023. 4. 16. [React] Suspense을 사용해 선언적으로 로딩 화면 구현하기 📒 Suspense을 사용해 선언적으로 로딩 화면 구현하기리액트의 Suspense는 React 16 버전에서 처음으로 선보인 후18 버전으로 오며 추가된 기능을 제공합니다. 이 글에서는 React 18에서의 Suspense를 왜, 어떻게 사용하는지 소개합니다.이번에 메이저 버전이 업데이트 된 react-query v5에서 Suspense가 어떻게 달라졌는지 다음 글로 빠르게 살펴보세요!react-query v5 주요 변경점 알아보기 feat. Suspense, ErrorBoundary📌 Suspense를 사용하는 이유리액트가 함수형 컴포넌트를 도입하며 내세운 가장 강력한 키워드는 선언형 프로그래밍입니다. 우선 본격적인 설명에 앞서 대비되는 명령형 프로그래밍과 선언형 프로그래밍의 차이에 대해 설명드립니.. 2023. 3. 23. 반응형 이전 1 다음
오픈 채팅
