매일 해내는 개발/React18 [React] useQuery의 onMutate 옵션 onMutate 속성은 useQuery 또는 useMutation 훅에서 제공하는 옵션 중 하나로, 쿼리 실행 중 mutation이 발생했을 때 수행되는 콜백 함수를 설정하는 역할을 한다. 보통 useMutation 훅을 사용하여 mutation을 처리할 때, optimistic update를 수행하거나, 캐시 업데이트를 수행하거나, 에러 발생 시 처리 등을 수행한다. 이 때, useQuery 훅에서 제공하는 onMutate 속성을 사용하면 mutation 전에 수행할 작업을 정의할 수 있다. onMutate 속성에 전달할 수 있는 값은 함수이다. 이 함수는 다음과 같은 형태를 가진다. onMutate?: (variables: TVariables) => Promise | R | undefined; 여기서.. 2023. 3. 8. [React] optimistic update(낙관적 업데이트) React Query는 API 호출과 관련된 데이터를 캐시하고 관리하는 라이브러리이다. 이 라이브러리는 optimistic updates(낙관적 업데이트)를 지원하며, 이는 데이터를 서버로부터 성공적으로 업데이트하기 전에도 UI를 업데이트할 수 있도록 한다. optimistic updates는 요청을 보내기 전에 UI를 업데이트하는 기능이다. 예를 들어, 사용자가 게시물을 좋아요 했을 때, UI에서 즉시 좋아요 수가 증가하도록 할 수 있다. 이 때 서버로 요청을 보내기 전에 UI를 업데이트하는 것이 낙관적 업데이트이다. 낙관적 업데이트는 사용자 경험을 개선하고, 서버에서 응답을 받을 때까지 기다리지 않고 사용자에게 빠른 피드백을 제공할 수 있다. 하지만 요청이 실패하면 이전 상태로 되돌려야 하므로, 이를.. 2023. 3. 7. [React] useMemo()와 React.memo의 차이점 useMemo()와 React.memo는 React의 성능 최적화를 위해 사용되는 두 가지 도구이다. useMemo() 계산 비용이 높은 함수의 반환값을 캐시하여, 같은 인자가 전달될 경우 다시 계산하지 않고 캐시된 값을 반환한다. 이를 통해 불필요한 계산을 줄이고 컴포넌트의 렌더링 성능을 개선할 수 있다. 예시 import { useMemo } from 'react'; function MyComponent(props) { const { data } = props; // data 값이 변경될 때마다 data의 길이를 계산하고, // 그 값을 캐시하여 같은 data가 전달될 때 재사용합니다. const dataLength = useMemo(() => data.length, [data]); return {d.. 2023. 3. 5. [React Query] 캐싱 / useQuery의 생명주기 react query를 통해 관리하는 쿼리 데이터는 다음과 같은 다섯가지 상태를 가진다. fresh | 초록색 새로 추가된 쿼리이다. staleTime이 설정되어있다면 설정된 시간만큼 fresh 상태로 유지된다. staleTime이 설정이 안되어있다면 기본값이 0이기 때문에 fresh 직후에 stale 상태로 전환된다. fresh 상태일 때는 mount, update 시에 데이터를 재요청하지 않는다. fetching | 파란색 요청 상태인 쿼리이다. mount, update 시에 코드에 해당하는 데이터가 fetch 또는 refetch 된다. stale | 노란색 데이터가 fetching이 완료되어 만료됐다고 판단하는 쿼리이다. stale 상태인 쿼리를 재호출하면 캐싱된 데이터가 반환되기 때문에 새로운 값.. 2023. 3. 3. [React] reactQuery queryKey와 queryFn의 관계, refetch() useQuery를 사용하면서 알게 된 몇가지 사실들! 1. queryKey와 queryFn의 관계 const { data: activeProjectsData } = useQuery({ queryKey: ['myProjects', filteredPidList], queryFn: getActiveProjects, staleTime: staleTime.myProjects, enabled: !!currentPidList, }); => queryKey에 있는 데이터를 queryFn이 매개변수로 사용할 수 있다. queryFn에 정의해준 함수에서 매개변수를 콘솔로 찍어보면 아래와 같이 객체가 찍히는 것을 알 수 있다. 이 객체 중 하나로 queryKey가 들어가기 때문에 이를 활용해서 함수 안에서 자유롭게 사용할 .. 2023. 3. 2. [React] React 상태 관리 라이브러리 Recoil 리코일이란? 리코일(Recoil)은 React 상태 관리 라이브러리 중 하나이다. 리액트에서 상태를 관리하기 위해서는 일반적으로 상태를 컴포넌트 내부에서 관리하거나 Redux와 같은 라이브러리를 사용한다. 하지만 Redux는 보일러플레이트 코드가 많고, 컴포넌트와 액션 사이의 연결을 설정하는 작업이 번거로울 수 있다. 반면, 리코일은 상태를 단일 원천으로 중앙 집중적으로 관리하면서도 이러한 불편함을 해소한다. 리코일은 상태 값을 저장하고 업데이트하는 데 사용되는 atom과 여러 selector로 구성된다. atom은 원자적으로 업데이트 가능한 상태 값을 나타내며, selector는 atom을 기반으로 다른 값을 계산하는 데 사용된다. 리코일은 기존의 리액트 상태 관리 방법보다 더 직관적이고 간단하게 상태.. 2023. 3. 1. [React] 서버 상태 관리 라이브러리 react-query의 개념과 useQuery, useMutation react-query 개념 react-query란? 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 서버 상태 관리 라이브러리 react-query를 사용하는 이유? 서버 데이터만 따로 관리하기 위해서! 기존의 redux와 같은 라이브러리들은 클라이언트 쪽 데이터를 관리하기 적합했지만 서버 쪽 관리에는 적합하지 않는 점들이 있었다. 기존에는 서버의 데이터와 클라이언트의 데이터가 공존하게 되고 그 데이터가 서로 상호작용하면서 섞여버린다. (예, 서버에는 이미 패치된 데이터가 저장되어 있고 클라이언트에는 패치되기 전 데이터가 유저에게 사용되고 있음) 기존 라이브러리들은 미들웨어를 통해 서버 데이트 관리를 할 수는 있지만 보일러 플레이트가 많아서 코드양이 많아지고 유지.. 2023. 2. 19. [React] Next.js란 무엇이고 왜 사용하는가 Overview Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 **서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)**과 같은 다양하고 풍부한 기능을 제공합니다. 서버사이드 렌더링(SSR)을 함으로써 얻는 이득은? 로딩- 클라이언트 사이드 렌더링(CSR)의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게되는데 이때까지 사용자는 많은 시간을 대기해야 하는데, 서버사이드 렌더링은 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어들게 됨 SEO- 클라이언트 .. 2023. 2. 7. [React] useParam React Router는 React 기반의 라우팅 라이브러리로, SPA(Single Page Application)에서 URL 경로를 기반으로 컴포넌트를 렌더링하고, 상태를 관리하는 기능을 제공한다. React Router의 useParam 훅은, URL 경로에 포함된 동적 파라미터를 가져와서 사용할 수 있게 해주는 훅이다. useParam 훅은 useParams 훅과 함께 사용된다. useParams는 URL 경로에서 파라미터 값을 객체로 반환하는 훅이고, useParam은 URL 경로에서 특정 파라미터 값을 가져오는 훅이다. 예를 들어, 다음과 같은 URL 경로가 있다고 가정해보자. /posts/:postId 위 경로에서 postId는 동적 파라미터로, postId 값에 따라 렌더링되는 컴포넌트가 달.. 2023. 1. 24. 이전 1 2 다음
