mirabo01 님의 블로그

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도 불필요하게 계속 렌더링됩니..

1. 상태 끌어올리기란 무엇인가?리액트를 사용하다 보면 여러 컴포넌트가 같은 데이터를 공유해야 하는 상황이 자주 생깁니다.예를 들어,형제 컴포넌트 간에 입력값을 공유하거나상위 컴포넌트에서 하위 여러 컴포넌트로 동일한 데이터를 전달해야 할 때가 그렇습니다.이때 가장 기본적인 접근법이 바로 상태 끌어올리기 (Lifting State Up) 입니다.즉, 공통으로 사용하는 데이터를 상위 컴포넌트의 state로 옮기고,그 데이터를 props로 하위 컴포넌트에 전달하는 방식입니다.2. 왜 상태를 끌어올려야 하는가?리액트의 데이터 흐름은 단방향(one-way) 입니다.즉, 부모 → 자식으로만 데이터가 전달됩니다.하지만 다음과 같은 상황을 생각해봅시다.function TemperatureInput({ label, va..

1. Hooks란 무엇인가?리액트 16.8 버전부터 등장한 **Hooks(훅)**은기존 클래스형 컴포넌트에서만 가능했던 기능(상태 관리, 생명주기 제어 등)을함수형 컴포넌트에서도 사용할 수 있게 해주는 기능입니다.과거에는 리액트에서 상태를 다루려면 반드시 클래스형 컴포넌트를 써야 했습니다.class Counter extends React.Component { state = { count: 0 }; render() { return ( 현재 카운트: {this.state.count} this.setState({ count: this.state.count + 1 })}> +1 ); }}하지만 Hooks가 등장하면서 ..