최근 MERN 스택으로 Todo 프로젝트를 진행하면서 클라이언트에서 데이터를 효율적으로 가져오기 위해 useSWR을 사용했습니다.이 글에서는 useSWR을 활용하여 데이터를 패칭하는 방법과 mutate를 이용한 데이터 조작을 다뤘습니다.1. useSWR이란?useSWR은 SWR 라이브러리의 React 훅으로, 클라이언트에서 데이터를 패칭하고 관리하는 데 유용했습니다.주요 특징은 다음과 같습니다.자동 데이터 갱신 (revalidation)캐싱을 활용한 성능 최적화데이터 요청을 최소화하는 deduplicationmutate를 통한 로컬 상태 업데이트2. useSWR 기본 사용법useSWR을 사용하면 쉽게 데이터를 가져올 수 있습니다.import useSWR from 'swr';import { API_BASE..

https://tanstack.com/query/v4/docs/framework/react/reference/useInfiniteQuery useInfiniteQuery | TanStack Query React DocsThis ad helps to keep us from burning out and rage-quitting OSS just *that* much more, so chill. 😉tanstack.comuseInfiniteQuery는 React Query에서 제공하는 훅 중 하나로, 페이징된 데이터를 손쉽게 가져오고 관리할 수 있게 해줍니다.일반적인 useQuery와 유사하지만, 여러 페이지의 데이터를 관리할 수 있는 추가 기능을 제공합니다.이를 활용하면 무한 스크롤과 같은 기능을 쉽게 구현할..

최근에 개인 프로젝트로 유튜브 클론 코딩을 진행하면서 무한 스크롤 기능을 추가하고 싶었습니다.검색을 통해 다양한 무한 스크롤을 구현한 코드를 살펴본 결과, 대부분의 코드에서 IntersectionObserver와 useRef를 활용한 방식을 사용하고 있었습니다.이번 포스팅에서는 useRef에 대해 작성해보도록 하겠습니다.1. useRef란?useRef는 리액트(React)에서 제공하는 훅으로, 다음과 같은 역할을 합니다DOM 요소 참조: useRef를 사용하면 특정 DOM 요소를 직접 참조할 수 있습니다.값 유지: 컴포넌트가 리렌더링되더라도 useRef로 저장한 값은 초기화되지 않고 유지됩니다. 이는 state와 달리 값이 변경되더라도 컴포넌트를 리렌더링하지 않기 때문에 불필요한 렌더링을 방지할 수 있습..

https://tanstack.com/query/latest/docs/framework/react/overview Overview | TanStack Query React DocsTanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation Motanstack.com 커스텀 훅의 문제점과 React Query의 장점리액..

https://reactrouter.com/en/main Home v6.26.1 | React Router reactrouter.com CSR(Client-Side Routing)Client-Side Routing (CSR)은 웹 애플리케이션에서 사용자가 링크를 클릭할 때, URL은 업데이트되지만 페이지 전체가 새로고침되지 않고, 메인 콘텐츠 영역만 동적으로 업데이트되는 방식입니다.일반적인 라우팅은 새로운 URL 요청 시 서버에서 전체 HTML 페이지를 받아와 페이지를 새로고침하는 반면, CSR은 필요한 데이터만 서버에서 받아와 화면의 일부만 동적으로 업데이트하여 성능을 최적화합니다.이를 통해 빠른 사용자 경험을 제공하며, React Router와 같은 도구를 사용하면 SPA의 장점을 유지하면서도 멀티 ..

React는 컴포넌트 기반의 라이브러리로, 컴포넌트 간의 데이터 전달은 일반적으로 props를 통해 이루어집니다.하지만 중첩된 컴포넌트 구조에서 여러 단계를 거쳐 데이터를 전달하는 것은 비효율적이고 복잡할 수 있습니다.이를 해결하기 위해 React는 Context API를 제공합니다.useContext란?useContext는 React에서 Context 객체를 가져와서 사용할 수 있게 해주는 훅입니다. Context는 전역적으로 데이터를 공유할 수 있게 해주는 메커니즘으로, 특정 트리 구조의 하위 컴포넌트에 데이터를 직접 전달하지 않고도 접근할 수 있게 합니다.useContext의 사용 방법useContext를 사용하려면 먼저 Context 객체를 생성해야 합니다. 그런 다음, 이 Context를 사용하..