자바스크립트 - React.js

[ReactQuery] Query Key - 의존성 배열을 활용해보자 !

❗ Query Key 기본적으로 리액트 쿼리는 쿼리의 고유한 key를 바탕으로 해당 쿼리에 대한 캐싱을 관리한다. 쿼리 키는 단순히 문자열을 포함하는 배열에서부터, 중첩 객체를 가지는 배열이 될 수도 있다. 쿼리 키가 고유하고, 직렬화를 가능한 한 사용할 수 있다. ✔ 단순한 Query key 주로 리스트나, 인덱스 리소스, 위계가 없는 리소스에 대해서는 쿼리 키를 작성한다. const { data: appointments = fallback } = useQuery( [queryKeys.appointments], () => getAppointments(monthYear.year, monthYear.month) ); 하지만 단순한 쿼리키의 문제점이 있다. 바로 문제점에 대해 쉽게 이해할 수 있도록 예시를 ..

[ReactQuery] 데이터를 미리 가져와 캐시에 넣는 Prefetching !

❓ Prefetching Prefetching은 데이터가 실제로 필요하기 전에 사전에 데이터를 가져오고 캐시에 저장하는 프로세스를 말한다. 이를 통해 데이터를 미리 가져올 수 있으므로 필요할 때 데이터를 즉시 사용할 수 있도록 하여 애플리케이션의 응답성과 사용자 경험을 개선할 수 있도록 한다. 정리하자면 주요 내용은 다음과 같다. 데이터를 사용하고자 할 때 만료 상태에서 데이터를 다시 가져온다. 데이터를 가져오는 중에는 캐시에 있는 데이터를 이용해 화면에 나타낸다. 추후 사용자가 사용할 법한 데이터에 Prefetching을 사용 한다. pagination과 다수의 사용자가 웹에서 특정 탭을 누를 확률이 높은 곳에는 prefetching을 통해 해당 데이터를 미리 가져오는 것이 좋다. ✔ 초기 셋팅 imp..

[ReactQuery] QueryClient의 defaultOptions를 사용한 전역 에러 핸들링

❗ 서론 ReactQuery를 사용하다가 useQuery의 onError를 사용하여 에러 핸들링을 한 경험들이 있을것이다. 그리고 글을 읽는 독자가 전역 에러 핸들링에 대해서 명확히 알지 못하여 컴포넌트 하나하나에 onError를 명시하는 반복적이고 비효율적인 작업을 한 번 쯔음은 해봤을거라 생각한다. 해당 포스팅은 그런 작업에서 여전히 헤매고있을 독자들에게 전하는 포스팅이다. 이름하여 "전역 에러 핸들링" ... 그리고 해당 포스팅은 예제와 공식 문서를 툭 던져줄 것이다 파이팅 그럼 시작해보자 ❗ 예제 일단 전역 에러 핸들링을 하지 않았던 예시를 살펴보자. ✔ 전역 에러 핸들링을 하지 않은 예제 export function useTreatments(): Treatment[] { const toast =..

[React.js] <React.Fragment>에 대해서 알아보자

❗ 서론 서론이랄게 딱히 없긴하지만, 내가 왜 지금에서야 이 포스팅을 쓰냐면 내가 여태 당연시 써오던게 React.Fragment인지 몰랐고 다른 개발자분들이 쓰신 이런 저런 포스팅을 보다보니 내가 써오던게 React.Fragment라는걸 알게되었다. 아무래도 그냥 쓰는거보단 뭐 조금이라도 더 알고쓰면 뭘 하든 어떻게든 득이 있지 않을까 ? 파이팅. ❓ React.Fragment Fragment는 React v16에 추가된 기능이다. 컴포넌트가 여러 Element를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 하는데, 이때 fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있다. ✔ 예제 return ( Hello! My nams is ..

[ReactQuery] react-query 기초에 대해 가볍게 살펴보기

❗ 서론 react-query에 대해 여러 포스팅을 하다가 기초에 대해 왜 갑자기 대뜸 다루느냐는 의문이 들 수 있는 포스팅이다. 강의를 듣고 여러 포스팅들을 보다보니 아직 내가 기초에 대해 잘 알고있지 않은 상태에서 학습을 진행하는 느낌적인 느낌이 들어서 내가 보기 편하게 이런 저런 내용들 정리해두려하는 포스팅이다. ❓ react-query react-query 를 다루기에 앞서 내가 처음에 조금 헷갈렸던 부분이 있다. 그건 바로 recoil과 react-query ! 물론 react-query 에 대해서 잘 모를 때 의문이 들었던건데 혹시 궁금해하실 분이 있을수도 있으니 .... 내가 의문이 들었던 부분은 "recoil도 상태관리 라이브러리고 react-query도 상태관리 라이브러리인데 왜 같이 쓰..

[ReactQuery] useQuery()와 useMutation()에 대해 알아보자

❓ useQuery() useQuery() 훅은 원격 데이터 소스(예: API 엔드포인트)에서 데이터를 가져와 애플리케이션의 상태에서 관리하는 데 사용한다. 일반적으로 useQuery는 서버에서 데이터를 가져와 애플리케이션에서 표시해야 할 때 활용되고 데이터 가져오기, 캐싱, 데이터의 업데이트를 자동으로 처리한다. const { isLoading, error, data } = useQuery('test', queryFn, options); useQuery() 훅은 인자로 queryKey와 queryFn, options를 인자로 받는다.queryKey와 fetcher는 필수적으로 입력해야하며 options는 선택적으로 입력해도된다. useQuery() 첫 번째 인자인 queryKey는 쿼리의 고유 식별자이..

[ReactQuery] isLoading과 isFetching의 차이점에 대해 알아보자

❗ isLoading, isFetching의 차이점 ReactQuery에서 isLoading 및 isFetching 속성은 데이터의 로드 상태를 나타내는 데 사용된다. isLoading은 특정 쿼리에 대해 React Query에서 제공하는 속성이다. 쿼리가 현재 데이터를 가져오고 있는지 여부를 나타내는 boolean 값을 반환한다. 예를 들면 다음과 같다. import { useQuery } from 'react-query'; function ExampleComponent() { const { data, isLoading, error } = useQuery('exampleData', fetchData); if (isLoading) { return Loading...; } if (error) { retur..

[React.js] useEffect와 async/await 함께 사용하기

❗ useEffect와 async/await 함께 사용하기 React 초기에 useEffect hook 내에서 async / await를 당연하게 함수와 변수에 사용하는것 처럼 하려는데 안되어서 useEffect에는 아직 async / await 사용이 불가능한가? 싶어서 검색을 이래저래 한 기억이 있어 내 블로그에서 포스팅하려한다. 물론 글은 짧다 ❌ useEffect(async () => { const data = await getdata(); setUser(data); }, []); 사용할 수 없는 이유는 다음과 같다. useEffect는 콜백 함수가 아무것도 반환하지 않거나 cleanup function을 반환 해야할것으로 정의되어있는데 콜백 함수 내에서 async/await 구문을 직접 사용하면..