React에서 Vite 사용법: 프로젝트 생성부터 실행과 빌드까지
React 프로젝트를 Vite로 생성하고 실행하는 방법을 npm create vite, 개발 서버 실행, 폴더 구조, 빌드, 기본 설정 흐름에 맞춰 정리합니다.
React
React 렌더링, Hook, 상태 관리, 폼 처리, UI 라이브러리 오류를 실무 사례 중심으로 정리합니다. 경고 메시지와 원인, 잘못된 코드와 수정 코드를 함께 보며 React 문제를 빠르게 해결할 수 있도록 구성했습니다.
총 16개의 글
React 컴포넌트 props 타입 지정하기: 부모와 자식 사이의 값 구조 잡기
React에서 TypeScript로 컴포넌트 props 타입을 지정하는 기본 방법을 정리합니다. 부모 컴포넌트가 자식 컴포넌트에 넘기는 값의 구조를 타입으로 고정하고, 필수 props와 함수 props를 실제 UI 컴포넌트 기…
React Cannot update 오류 해결: 렌더링 중 setState 원인
React에서 Cannot update a component while rendering a different component 경고가 발생하는 원인을 렌더링 중 setState 호출 위치를 기준으로 정리합니다.
React Maximum update depth exceeded 오류 해결: 무한 렌더링 원인 찾기
React에서 Maximum update depth exceeded 오류가 발생하는 원인을 setState 호출 위치, useEffect 의존성 배열, props와 state 동기화 구조를 기준으로 정리합니다.
React state 업데이트 안됨 문제 해결
React에서 state를 변경했는데 화면이 업데이트되지 않을 때 확인해야 할 직접 mutation, 같은 참조 반환, setState 로그 착각, 함수형 업데이트, 중복 state 문제를 정리합니다.
React 리스트 key 경고 해결 기준: index key를 피해야 하는 이유
React에서 리스트를 렌더링할 때 발생하는 key 경고의 원인과 해결 기준을 정리합니다. index key가 위험해지는 상황과 실제 코드에서 key 위치를 고치는 방식을 함께 다룹니다.
React useEffect 두 번 실행되는 이유: StrictMode·API 중복 해결
React 개발 환경에서 useEffect가 반복 실행되는 원인을 StrictMode, cleanup, 의존성 배열로 나누고 조회·저장 API의 안전한 처리 방법을 정리합니다.
React Hook Form 에러 메시지 표시 문제 해결: validation이 안 보일 때 체크리스트
React Hook Form 에러 메시지 표시 문제 해결: validation이 안 보일 때 체크리스트 상황에서 먼저 확인할 로그, 설정, 버전, 환경 차이를 실무 체크리스트로 정리합니다.
Next.js 커스텀 훅 설계: 프론트엔드 상태 관리 구조 잡기
Next 커스텀 훅 설계: 프론트엔드 상태 관리 아키텍처을 중심으로 개념, 사용 기준, 실무 적용 흐름을 예제와 함께 정리합니다. 처음 확인할 때 헷갈리는 지점도 함께 짚었습니다.
React 라이브러리 조합 가이드: Zustand·TanStack Query·shadcn/ui 선택 기준
React 프로젝트에서 Zustand, TanStack Query, shadcn/ui, Radix UI 같은 라이브러리를 선택할 때 필요한 실무 기준을 정리합니다.