jin's Blog

React Query는 서버 상태 관리를 위한 강력한 라이브러리로, 효율적인 데이터 패칭, 캐싱, 그리고 동기화 기능을 제공한다. 이번 포스팅에서는 React Query의 주요 개념과 고급 기능을 정리하고, React Router Data API(이하 RRD의 loader)와의 콤비네이션 활용법도 함께 소개한다.1. Query Key에 대한 이해React Query의 queryKey는 데이터를 식별하는 고유한 키다. 데이터 캐싱, 무효화, 갱신 등의 작업은 모두 queryKey를 기준으로 이루어진다.구조화된 Query Key: queryKey는 배열 형태로 작성하며, 데이터를 체계적으로 관리할 수 있다.const { data } = useQuery({ queryKey: ["events", userId]..

TanStack Query 사용법: 기존 방식에서 더 나은 데이터 관리로TanStack Query는 React 애플리케이션에서 데이터 패칭과 상태 관리를 더 효율적으로 처리하기 위한 도구다. 이번에는 기존 useEffect와 useState를 사용한 데이터 패칭을 TanStack Query로 교체하는 과정을 알아보고, 이를 활용하는 방법을 정리한다.1. 기존 방식에서 TanStack Query로 전환하기기존 방식에서는 데이터 패칭과 상태 관리를 위해 useEffect와 useState를 조합하여 사용했을 것이다. 하지만 이 방식은 코드의 복잡도를 증가시키고, 로딩 상태, 에러 처리 등을 별도로 관리해야 하는 번거로움이 있다.TanStack Query를 도입하면 이런 과정을 단순화할 수 있다. 먼저 데이터..

TanStack Query를 사용해야 하는 이유React 애플리케이션에서 데이터를 효율적으로 관리하고 요청 상태를 제어하는 것은 매우 중요하다. TanStack Query(이전 명칭: React Query)는 이러한 요구를 해결하기 위해 설계된 강력한 라이브러리다. 이 도구를 사용해야 하는 이유를 몇 가지로 나눠 설명한다.1. 데이터 패칭의 간소화TanStack Query는 복잡한 데이터 패칭 로직을 단순화한다. 전통적인 방법으로 데이터를 가져올 때 useEffect와 useState를 사용하며 생길 수 있는 여러 문제들을 해결한다. 이를 통해 코드를 더 깔끔하고 관리하기 쉽게 만들어 준다.2. 자동 캐싱 및 상태 관리이 라이브러리는 데이터를 자동으로 캐싱한다. 동일한 데이터 요청이 발생하면 서버에 추가..

React Router를 활용한 사용자 인증 구현이 글에서는 React Router와 fetch API를 이용해 사용자 인증 로직을 구현하는 방법을 설명한다. 로그인(login)과 회원가입(signup) 모드를 처리하며, 서버와의 통신, 인증 토큰 저장, 그리고 만료 시간 관리 등 전체적인 인증 흐름을 다룬다.코드 구성작성한 코드는 다음 두 가지 주요 부분으로 나뉜다.AuthenticationPage 컴포넌트사용자에게 로그인/회원가입 폼을 제공한다.action 함수사용자가 입력한 데이터를 처리하고, 서버와 통신하는 역할을 한다.AuthenticationPage 컴포넌트import { redirect } from "react-router-dom";import AuthForm from "../componen..

프론트엔드 작업에서 자주 사용하는 기능과 도구를 전체적인 과정과 함께 순서대로 정리해보겠습니다. 이 순서는 대부분의 프론트엔드 개발자들이 작업할 때 겪는 일반적인 워크플로우를 반영하며, 사용하는 도구와 프레임워크는 현재(2025년 기준) 가장 인기 있는 기술을 기준으로 작성했다. GPT로 부터 정보를 얻음, 1. 프로젝트 초기 설정주요 작업:프로젝트 구조 설정 및 기본 환경 구성.패키지 매니저로 필요한 라이브러리 설치.개발 환경(로컬 서버, 빌드 도구) 설정.자주 사용하는 도구:패키지 매니저:npm, yarn, 또는 pnpm (최근 pnpm의 인기가 증가)프로젝트 초기화:create-react-app, Vite, Next.js, Create Next AppVite가 속도와 단순성 덕분에 최근 인기.버전 ..

loader와 비슷한 형태로 에러도 핸들이 가능하다.일단 아래와 같은 코드로 하위 child 에서 에러가 발견됐을때에러페이지를 띄울 수 있도록 설정이 가능하다.const router = createBrowserRouter([ { path: "/", element: , errorElement: , children: [ { index: true, element: }, { path: "events", element: , children: [ { index: true, element: , loader: eventLoader, }, ..

React Router의 loader 기능에 대해 알아보자loader란 무엇인가?React Router v6.4 이상에서 소개된 loader는 컴포넌트가 렌더링되기 전에 데이터를 가져오는 데 사용되는 새로운 기능이다. 이를 통해 서버에서 데이터를 가져오거나 비동기 작업을 수행한 뒤 컴포넌트에 데이터를 제공할 수 있다. loader는 주로 라우트와 연결되며, 데이터를 컴포넌트에 prop 형태로 전달한다.loader의 주요 특징비동기 데이터 가져오기 loader는 fetch나 axios와 같은 비동기 API 호출을 통해 데이터를 가져올 수 있다. 이 과정은 라우트가 렌더링되기 전에 이루어진다.라우트와 연결된 데이터 로딩 loader는 라우트에 특정 데이터를 미리 로드하여 컴포넌트가 데이터를 바로 사용할 수 ..

React Router의 핵심 기능: NavLink, useNavigate, useParams React Router는 React 애플리케이션에서 동적인 라우팅을 구현하는 데 필수적인 도구다. 이번 글에서는 React Router의 주요 기능인 NavLink, useNavigate, 그리고 useParams를 활용해 라우팅을 효율적으로 설계하는 방법을 적어본다.1. NavLink를 활용한 현재 위치 읽기NavLink는 React Router에서 제공하는 컴포넌트로, 현재 사용자가 위치한 페이지를 쉽게 확인할 수 있도록 도와준다. 특히 isActive 값을 활용하면 현재 링크가 활성화된 상태인지 확인할 수 있으며, 이를 통해 동적으로 스타일을 적용할 수 있다.기본 사용법 (isActive ? "active..

React Router에서 상대경로와 절대경로: 개념부터 활용까지React Router에서 경로를 설정할 때 "상대경로"와 "절대경로"는 매우 중요한 개념이다. 특히 Link와 relative 속성을 적절히 사용하면 애플리케이션의 라우팅을 효율적으로 관리할 수 있다. 이번 글에서는 상대경로와 절대경로의 차이점, /의 유무, 그리고 relative 속성의 활용법까지 단계별로 다룬다.1. 절대경로 (Absolute Path)절대경로는 애플리케이션의 루트(/)를 기준으로 경로를 정의한다. URL이 항상 루트에서 시작되기 때문에 현재 위치와 상관없이 지정된 경로로 이동한다.예시:Products항상 /products로 이동한다.현재 경로와 상관없이 동일한 결과를 제공한다.사용 시기:전역적으로 접근해야 하는 경로 ..

비교적 여러 프로젝트로 인해 페이지에 관한 지식은 아직 남아있다.하지만 내가 작동원리에 대해 정확히 아느냐?그건 No 다.어찌어찌 프로젝트 완성시키기는 되겠지만 깊은 이해가 어느 정도 필요하다고 생각이 든다. 일단 기본적인 페이지 라우팅 설정이다.import { createBrowserRouter, RouterProvider } from "react-router-dom";import HomePage from "./pages/Home";import ProductsPage from "./pages/Products";const router = createBrowserRouter([ { path: "/", element: }, { path: "/products", element: },]);function..