React에서 Vite 사용법: 프로젝트 생성부터 실행과 빌드까지
React 프로젝트를 Vite로 생성하고 실행하는 방법을 npm create vite, 개발 서버 실행, 폴더 구조, 빌드, 기본 설정 흐름에 맞춰 정리합니다.
React
React 렌더링, Hook, 상태 관리, 폼 처리, UI 라이브러리 오류를 실무 사례 중심으로 정리합니다. 경고 메시지와 원인, 잘못된 코드와 수정 코드를 함께 보며 React 문제를 빠르게 해결할 수 있도록 구성했습니다.
총 28개의 글
TypeScript optional props와 default value 처리법
React 컴포넌트에서 TypeScript optional props를 사용할 때 기본값을 어디서 처리해야 하는지 정리합니다. `?`, `undefined`, `null`, 구조 분해 기본값, optional callback…
React TypeScript 기본 구조: tsx 파일과 props 타입 기준
React에서 TypeScript를 처음 사용할 때 헷갈리기 쉬운 .ts와 .tsx 차이, 컴포넌트 파일 구조, props 타입 작성 위치를 정리합니다. 처음부터 복잡한 타입 설계로 들어가기 전 기본 구조를 잡는 데 초점을 맞…
TypeScript children 타입: ReactNode와 PropsWithChildren 차이
React TypeScript에서 children 타입을 지정할 때 ReactNode, PropsWithChildren, ReactElement, JSX.Element를 어떻게 구분해야 하는지 정리합니다. children을 필…
React 컴포넌트 props 타입 지정하기: 부모와 자식 사이의 값 구조 잡기
React에서 TypeScript로 컴포넌트 props 타입을 지정하는 기본 방법을 정리합니다. 부모 컴포넌트가 자식 컴포넌트에 넘기는 값의 구조를 타입으로 고정하고, 필수 props와 함수 props를 실제 UI 컴포넌트 기…
2026 프론트엔드 개발자 로드맵: React, Next.js, TypeScript
2026년 기준 프론트엔드 개발자를 목표로 공부할 때 HTML, CSS, JavaScript, React, Next.js, TypeScript, AI 도구를 어떤 순서로 연결해야 하는지 정리합니다.
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 위치를 고치는 방식을 함께 다룹니다.