jin's Blog

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..

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..

Redux Thunk로 비동기 작업 처리하기Redux Thunk는 Redux에서 비동기 작업(예: HTTP 요청)을 처리할 때 사용하는 미들웨어다. Redux는 기본적으로 객체 형태의 액션만 처리할 수 있지만, Thunk를 사용하면 함수 형태의 액션도 디스패치할 수 있다. 이 글에서는 Redux Toolkit을 사용하여 Thunk로 HTTP 요청을 처리하는 방법을 알아보자.Thunk란 무엇인가?Thunk는 액션을 함수 형태로 만들어 디스패치할 수 있도록 도와주는 미들웨어다. 일반적으로 HTTP 요청과 같은 비동기 작업에서 많이 사용된다. Thunk를 통해 비동기 작업을 실행하고, 작업 결과에 따라 Redux 상태를 업데이트할 수 있다.Redux Thunk로 HTTP 요청 처리하기여기서는 JSONPlace..

기본적으로 redux toolkit을 이용해서 state 공유 및 관리와 함수 사용등을 알았다.이제 slice를 용도별로 분류하고 여러 개의 state를 사용하는 방법을 알아보자.  처음에는 store폴더에 index.js로 모든 redux 함수들을 모아놨었지만지금은 용도별로 분류했다.여기서 사용한 것은 counter와 auth 이다. 1. authimport { createSlice } from "@reduxjs/toolkit";const initlAuthState = { isAuthenticated: false };const authSlice = createSlice({ name: "auth", initialState: initlAuthState, reducers: { login(state..