mirabo01 님의 블로그

1. 왜 라우터와 React Query를 함께 고려해야 할까React Router는 페이지 간의 UI 전환을 담당하고,React Query는 각 페이지의 데이터 로딩과 캐싱을 담당합니다.이 두 가지를 잘 결합하면페이지를 이동할 때마다 새로 데이터를 불러오지 않아도 되고,사용자는 즉각적인 반응성을 느낄 수 있습니다.예를 들어대시보드 → 설정 → 통계 페이지로 이동하더라도이미 캐시에 있는 데이터를 재활용하면 로딩 없이 전환이 가능합니다.2. 예제 시나리오이번 예제는 다음 구조를 가정합니다./dashboard ├── /stats ├── /notifications └── /settings각 페이지는 서버로부터 데이터를 받아오며,React Query를 통해 캐시 관리가 이루어집니다.3. React Query 전역..

1. SPA에서 라우팅이 필요한 이유React는 기본적으로 단일 페이지 애플리케이션(SPA) 구조를 따릅니다.즉, 화면 이동 시 실제로 페이지가 새로고침되지 않고컴포넌트의 전환만 이루어집니다.하지만 대시보드나 관리자 페이지처럼여러 화면(예: 통계, 알림, 설정 등)을 구성할 때는각 화면을 독립된 “페이지 단위”로 나누는 것이 훨씬 효율적입니다.이를 가능하게 해주는 것이 바로 React Router입니다.2. React Router 설치 및 기본 설정먼저 패키지를 설치합니다.npm install react-router-dom그다음 프로젝트의 루트에서 BrowserRouter를 적용합니다.// index.jsimport { BrowserRouter } from 'react-router-dom';import ..

1. 로그인 후 보여지는 대시보드란?로그인 시스템을 구축했다면,다음 단계는 **로그인한 사용자의 데이터를 시각적으로 보여주는 대시보드(Dashboard)**입니다.예를 들어 다음과 같은 정보가 표시됩니다.로그인한 사용자의 이름, 이메일, 가입일최근 활동 내역알림, 메시지, 통계 등이 페이지는 서버에서 **로그인된 사용자 정보(API)**를 가져와야 하며,데이터 갱신이 잦기 때문에 React Query를 사용하는 것이 가장 효율적입니다.2. 기본 구조대시보드 페이지를 구현하기 위해 다음 세 가지가 필요합니다.1️⃣ 사용자 인증 토큰을 포함한 API 요청2️⃣ React Query의 useQuery로 데이터 가져오기3️⃣ 로딩/에러/성공 상태에 따른 UI 처리3. API 요청 설정Axios를 사용할 때,모든..

1. 로그인 기능, 왜 제대로 설계해야 할까?프론트엔드 개발에서 로그인은 단순한 폼 이상의 의미를 가집니다.단지 아이디와 비밀번호를 입력받는 것 같지만,실제로는 토큰 관리, 에러 처리, 상태 동기화, 보안까지 함께 고려해야 합니다.많은 초보 개발자가 다음과 같은 문제를 겪습니다.로그인 후 새로고침 시 인증 정보가 사라짐잘못된 비밀번호 입력 시 에러 처리 누락로그인/로그아웃 시 전역 상태 업데이트 누락이번 강의에서는React Hook Form + React Query를 결합해현실적인 로그인 기능을 구현하는 방법을 단계별로 살펴보겠습니다.2. 기본 세팅먼저 필요한 라이브러리를 설치합니다.npm install react-hook-form @tanstack/react-query axios그리고 전역에서 Reac..

1. 폼과 서버 통신, 왜 어려운가?리액트 프로젝트에서 회원가입, 로그인, 게시글 작성 같은 폼은 필수입니다.하지만 많은 개발자가 다음과 같은 문제를 겪습니다.입력 검증과 서버 요청 코드가 섞임제출 중 로딩 상태나 에러 처리 누락성공 후 데이터 리페칭이나 페이지 이동이 복잡함이 문제를 해결하기 위한 가장 강력한 조합이 바로React Hook Form + React Query입니다.React Hook Form은 “입력값을 관리”하고,React Query는 “서버와의 통신 상태를 관리”합니다.두 라이브러리를 함께 사용하면폼 로직과 네트워크 로직을 완벽히 분리할 수 있습니다.2. 준비하기두 라이브러리를 설치합니다.npm install react-hook-form @tanstack/react-query axio..

1. 폼 관리의 어려움리액트로 개발하다 보면 **사용자 입력을 다루는 폼(form)**을 자주 만들게 됩니다.로그인, 회원가입, 게시글 작성, 검색창 등 거의 모든 페이지에서 사용되죠.그런데 이런 폼을 useState로 하나씩 관리하기 시작하면 다음과 같은 문제가 생깁니다.const [name, setName] = useState('');const [email, setEmail] = useState('');const [password, setPassword] = useState('');입력 필드가 늘어날수록 코드가 복잡해지고,검증(validation)이나 에러 메시지를 처리하기도 점점 어려워집니다.이 문제를 해결하기 위해 만들어진 라이브러리가 바로 React Hook Form입니다.2. React Hoo..

1. 클라이언트 상태 vs 서버 상태리액트에서 상태는 크게 두 가지로 나뉩니다.구분 설명 예시클라이언트 상태(Client State)컴포넌트 내부에서만 사용하는 값모달 열림 여부, 입력 값서버 상태(Server State)서버로부터 가져온 데이터게시글 목록, 사용자 정보useState나 useReducer는 클라이언트 상태 관리에는 적합하지만,서버 상태 관리에는 한계가 있습니다.왜냐하면 서버 데이터는 비동기적이며, 여러 소스에서 동시에 바뀔 수 있기 때문입니다.이를 효율적으로 관리하기 위해 등장한 라이브러리가 바로 React Query입니다.2. React Query란?React Query는 서버 데이터 관리에 특화된 라이브러리입니다.비동기 데이터 fetching, 캐싱, 리페칭(refetch), 동기화..

1. 왜 상태 관리가 필요한가?리액트에서 작은 컴포넌트를 만들 때는 useState 하나면 충분합니다.하지만 앱이 커지면 여러 컴포넌트가 같은 데이터를 공유해야 하는 상황이 생깁니다.예를 들어,로그인 정보다크모드 여부장바구니 목록사용자 프로필이런 값들은 페이지 곳곳에서 사용되므로,단순히 props로 전달하기에는 너무 복잡해집니다.이럴 때 전역 상태 관리(Global State Management) 도구가 필요합니다.2. 상태 관리의 발전 과정리액트의 상태 관리는 크게 3단계로 발전해왔습니다.단계 사용 방식 예시1단계useState, useContext간단한 앱2단계Redux복잡한 앱, 예측 가능한 상태3단계Recoil, Zustand 등간결하고 효율적인 대안각 도구는 사용하는 목적과 철학이 다릅니다.이제..

1. 라우팅이란 무엇인가?웹 애플리케이션에서 “라우팅(Routing)”이란 URL에 따라 다른 화면을 보여주는 기술을 말합니다.전통적인 웹에서는 사용자가 페이지를 클릭할 때마다 서버가 HTML 파일을 새로 보내주지만,리액트는 SPA(Single Page Application) 방식이므로 한 개의 페이지에서 URL만 바꿔가며 화면을 교체합니다.이 과정을 도와주는 라이브러리가 바로 React Router입니다.2. React Router 설치리액트 라우터는 현재 react-router-dom 패키지로 제공됩니다.npm install react-router-dom설치 후, 프로젝트 내에서 다음과 같이 불러올 수 있습니다.import { BrowserRouter, Routes, Route } from 'reac..

1. 리액트의 렌더링 원리 간단 복습리액트는 상태(state) 혹은 props가 변경되면 해당 컴포넌트와 자식 컴포넌트를 다시 렌더링합니다.이건 기본적으로 좋은 구조지만, 불필요한 렌더링이 많아지면 성능 저하로 이어집니다.예를 들어, 아래 코드를 살펴봅시다.function Parent() { const [count, setCount] = useState(0); return ( 클릭 횟수: {count} setCount(count + 1)}>+ );}function Child() { console.log('Child 렌더링됨'); return 자식 컴포넌트;}버튼을 클릭할 때마다 Parent의 상태가 바뀌기 때문에,Child도 불필요하게 계속 렌더링됩니..