React는 컴포넌트와 props, state부터 어떤 순서로 배우나요?
React는 컴포넌트·JSX·props·state부터 익히고 Effect·상태 공유·라우팅·성능 측정으로 확장합니다. 첫 카운터를 클릭해 값이 바뀌는 모습을 먼저 본 뒤 각 개념을 연결합니다.
적용 조건·범위: 현재 Vite 공식 가이드 기준으로 Node.js 20.19 이상 또는 22.12 이상이 필요합니다. 일부 템플릿은 더 높은 버전을 요구할 수 있으므로 패키지 관리자 경고가 나오면 먼저 Node.js 버전을 확인합니다.
본문 근거: React Quick Start · Vite Getting Started
React는 무엇을 해결하는가
React는 화면을 작은 컴포넌트로 나누고, 데이터가 바뀌면 그 데이터에 맞는 화면을 다시 계산하도록 도와주는 UI 라이브러리입니다.
처음에는 다음 흐름만 이해하면 됩니다.
- 컴포넌트로 화면을 나눕니다.
- JSX로 각 컴포넌트가 보여줄 UI를 작성합니다.
- props로 부모의 데이터를 자식에게 전달합니다.
- state로 사용자 행동에 따라 바뀌는 값을 관리합니다.
- 화면이 커지면 상태 위치와 변경 책임을 정리합니다.
- React 바깥의 시스템과 동기화해야 할 때 Effect를 사용합니다.
- 상태 변경 규칙이 복잡해지면 reducer와 Context를 검토합니다.
- 마지막에는 실제 렌더링 비용을 측정한 뒤 최적화 여부를 결정합니다.
React 공식 Quick Start도 컴포넌트, 데이터 표시, 조건·목록, 이벤트와 상태, 컴포넌트 간 데이터 공유를 핵심 흐름으로 설명합니다.
React 학습 순서
BlogFlow의 React 과정은 다음 순서로 진행합니다.
초급 구간
- Vite 프로젝트와 실행 구조
- 컴포넌트
- JSX
- props
- children과 컴포넌트 합성
- useState
- state 업데이트 오류
- 리스트 key
- state 보존과 초기화
- 제어 컴포넌트와 상태 끌어올리기
- useRef
중급 구간
- useEffect
- StrictMode에서 Effect가 두 번 실행되는 이유
- Effect 생명주기와 useEffectEvent
- Maximum update depth 무한 렌더링
- 렌더링 중 setState 오류
- useReducer와 Context
- 커스텀 Hook
- props 타입 설계
- React Hook Form
- 검색·필터
- lazy와 Suspense
- useTransition과 useDeferredValue
- useActionState와 useOptimistic
- React Router
- 라이브러리 선택 기준
고급 구간
-
shadcn/ui
-
React DevTools Profiler
- React Compiler와 수동 메모이제이션 판단
중요한 점은 오류 글을 과정 끝에 몰아두지 않는 것입니다. useState를 배운 다음 state 업데이트 문제를 확인하고, 리스트를 다룬 다음 key 경고를 해결하고, Effect를 배운 다음 Effect 관련 오류를 바로 다룹니다.
개발환경 확인
현재 Vite 공식 가이드 기준으로 Node.js 20.19 이상 또는 22.12 이상이 필요합니다. 일부 템플릿은 더 높은 버전을 요구할 수 있으므로 패키지 관리자 경고가 나오면 먼저 Node.js 버전을 확인합니다.
터미널에서 다음 명령을 실행합니다.
node -v
npm -v
두 명령 모두 버전이 출력되면 다음 단계로 진행할 수 있습니다.
React + TypeScript 프로젝트 첫 실행
TaskFlow는 Vite의 React + TypeScript 템플릿으로 만듭니다.
npm create vite@latest taskflow -- --template react-ts
cd taskflow
npm install
npm run dev
터미널에 Local 주소가 나타나면 브라우저에서 해당 주소를 엽니다. Vite 기본 React 화면이 표시되면 첫 실행은 완료입니다.
이번 글에서는 프로젝트를 생성하고 실행하는 데까지만 집중합니다. Vite의 파일 구조, npm scripts, build와 preview 차이는 다음 글에서 자세히 다룹니다.
자주 발생하는 오류와 해결
node 또는 npm 명령을 찾을 수 없습니다
Node.js가 설치되지 않았거나 PATH가 정상적으로 잡히지 않은 경우입니다.
먼저 터미널을 새로 열어 다시 확인합니다.
node -v
npm -v
그래도 인식되지 않으면 Node.js 설치 상태와 PATH를 확인합니다.
Vite가 Node.js 버전을 올리라고 합니다
Vite는 현재 Node.js 20.19+ 또는 22.12+를 요구합니다. 버전이 낮다면 React 코드보다 Node.js 환경을 먼저 업데이트해야 합니다.
npm install에서 오류가 발생합니다
네트워크 문제인지, 패키지 레지스트리 문제인지, 현재 Node.js 버전 문제인지 구분합니다. 오류 메시지 첫 줄만 보지 말고 마지막 원인 부분을 함께 확인합니다.
포트가 이미 사용 중입니다
Vite가 다른 포트를 제안하면 해당 주소로 접속할 수 있습니다. 특정 포트를 반드시 사용해야 하는 상황이 아니라면 처음에는 Vite가 안내하는 포트를 그대로 사용해도 됩니다.
독립 실습: 클릭하면 값이 바뀌는 첫 컴포넌트
버튼을 눌러 클릭 횟수가 증가하는지 확인하세요.
예제 크게 보기 (새 탭)위에서 만든 Vite 프로젝트의 src/App.tsx를 아래 코드로 바꿉니다. TaskFlow ZIP은 필요 없습니다.
import { useState } from 'react';
type CounterProps = { label: string };
function Counter({ label }: CounterProps) {
const [count, setCount] = useState(0);
return (
<button type="button" onClick={() => setCount((previous) => previous + 1)}>
{label}: {count}
</button>
);
}
export default function App() {
return (
<main>
<h1>React 첫 확인</h1>
<Counter label="클릭 횟수" />
</main>
);
}
npm run dev로 열린 화면에서 버튼을 두 번 누르세요. 기대 결과는 ‘클릭 횟수: 0’ → ‘클릭 횟수: 1’ → ‘클릭 횟수: 2’입니다. App은 컴포넌트를 배치하고 label은 props로 전달됩니다. Counter의 count는 state이며 버튼 이벤트가 업데이트합니다. 우선 동작을 확인하고 state의 자세한 규칙은 뒤 회차에서 배웁니다.
스스로 확인: <Counter label="연습" />으로 바꾸면 무엇이 바뀔까요? 버튼의 문구만 ‘연습: 0’으로 시작합니다. 클릭 횟수는 같은 방식으로 증가합니다. 버튼이 보이지 않으면 src/App.tsx 저장 여부와 터미널 오류를 확인하세요.
학습 완료 체크리스트
- React를 컴포넌트 기반 UI 라이브러리라고 설명할 수 있습니다.
- props의 역할을 설명할 수 있습니다.
- children과 컴포넌트 합성, state가 각각 어떤 역할인지 큰 흐름을 설명할 수 있습니다.
- Node.js와 npm 버전을 확인할 수 있습니다.
- Vite React + TypeScript 프로젝트를 생성할 수 있습니다.
- npm run dev로 첫 화면을 실행할 수 있습니다.
선택 실습: 할 일 앱에 적용하기
TaskFlow는 작업을 추가·완료·삭제하는 할 일 앱입니다. 이 선택 실습에서는 React로 화면과 상태를 이어서 만듭니다.
Vite의 react-ts 템플릿으로 TaskFlow를 생성하고, 기본 화면 대신 최소 시작 화면을 표시합니다.
선택: 연재 프로젝트와 전체 자료
연재 프로젝트를 이어 만드는 분을 위한 자료입니다. 이 글의 개념과 예제만 찾으셨다면 필요한 파일과 실행 방법만 펼쳐보세요.
TaskFlow 프로젝트 적용
TaskFlow 1단계 실행
시작 상태와 완성 결과를 바꾸어 본문에서 적용한 화면과 동작을 비교하세요.
예제 크게 보기 (새 탭)새 TaskFlow 프로젝트를 만드는 첫 단계입니다. 앞선 완료 코드 없이 시작할 수 있습니다. 전체 결과물이 궁금하다면 React로 TaskFlow 만들기: 과정 미리보기를 참고하세요.
이번 단계에서 작성할 파일: index.html, package.json, src/App.tsx, src/index.css, src/main.tsx, tsconfig.json, vite.config.ts. 아래 변경 설명을 따라 수정하고 전체 코드의 같은 파일과 대조합니다.
완료 코드 ZIP 다운로드 — step-01-first-run
여기부터는 React 1회차부터 순서대로 공부하는 독자를 위한 누적 실습입니다.
현재 단계
1 / 32
현재 상태
아직 TaskFlow 프로젝트가 없습니다.
이번 목표
Vite의 react-ts 템플릿으로 TaskFlow를 생성하고, 기본 화면 대신 최소 시작 화면을 표시합니다.
Before
프로젝트 없음
After
React + TypeScript + Vite 프로젝트가 실행되고 화면에 TaskFlow 시작 문구가 보입니다.
실행 확인
npm run dev
브라우저에 TaskFlow 제목과 시작 문구가 표시되는지 확인합니다.
이번 단계의 완료 체크포인트는 다음과 같습니다.
step-01-first-run
전체 코드 뷰어의 모든 파일은 다운로드 ZIP과 같습니다. ZIP은 독립 실행할 수 있는 완료 시점의 코드입니다. Node.js 22.12 이상에서 npm install 후 npm run dev로 실행하고, npm run build로 검사합니다.
전체 파일·코드 보기
실습 프로젝트 전체 코드
index.html
<!doctype html>
<html lang="ko"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>TaskFlow</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>
package.json
{
"name": "taskflow-step-01-first-run",
"version": "1.0.0",
"private": true,
"type": "module",
"engines": {
"node": ">=22.12.0"
},
"scripts": {
"dev": "vite --host 127.0.0.1",
"build": "tsc --noEmit && vite build",
"preview": "vite preview --host 127.0.0.1"
},
"dependencies": {
"react": "19.3.0",
"react-dom": "19.3.0"
},
"devDependencies": {
"typescript": "7.0.2",
"vite": "8.3.0",
"@vitejs/plugin-react": "6.1.1",
"@types/react": "19.3.0",
"@types/react-dom": "19.3.0",
"@types/node": "26.6.2"
}
}
src/App.tsx
function App() {
return (
<main>
<h1>TaskFlow</h1>
<p>React 학습 프로젝트가 시작되었습니다.</p>
</main>
);
}
export default App;
src/index.css
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
color: #111;
background: #f5f5f5;
}
button,
input {
font: inherit;
}
main {
width: min(720px, calc(100% - 32px));
margin: 48px auto;
}
button, input, select { min-height: 44px; font: inherit; }
button, input, select { border: 1px solid #aaa; padding: 8px 12px; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
ul { list-style: none; padding: 0; display: grid; gap: 12px; }
.task-card { border: 1px solid #ccc; padding: 16px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.task-card__content, .task-card__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
form, section { margin-block: 20px; }
input:not([type="checkbox"]), select { max-width: 100%; }
details { margin-block: 24px; } summary { cursor: pointer; min-height: 44px; }
body { overflow-wrap: anywhere; }
[role="dialog"], [data-radix-popper-content-wrapper] { --radius: 0; }
src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
);
tsconfig.json
{
"compilerOptions": {
"target": "ES2022",
"lib": [
"ES2022",
"DOM",
"DOM.Iterable"
],
"module": "ESNext",
"moduleResolution": "Bundler",
"jsx": "react-jsx",
"strict": true,
"skipLibCheck": true,
"noEmit": true,
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"types": [
"vite/client"
],
"paths": {
"@/*": [
"./src/*"
]
}
},
"include": [
"src",
"vite.config.ts"
]
}
vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({ plugins: [react()] });
글 소개·학습 준비·전체 목차
React · 1/32 · TaskFlow 누적 실습
React 학습 순서 컴포넌트 props state부터 상태관리까지
React는 컴포넌트 → JSX → props·합성 → state → Effect → 상태 공유 → 라우팅 → 렌더링 측정 순서로 익힙니다. 처음에는 아래 독립 카운터로 컴포넌트·props·state가 화면에 연결되는 흐름부터 확인합니다. 이 글의 완료 파일은 step-01-first-run입니다. 과정 목록은 안내·학습·참고 글을 구분하며, 실습 파일의 step 번호는 프로젝트를 이어 만드는 순서입니다.
React · 1 / 32 · 필수 길잡이 · 선수 지식·과정 안내
React를 처음 공부할 때 가장 중요한 것은 Hook을 많이 외우는 것이 아니라, 어떤 순서로 화면과 상태를 확장해야 하는지 이해하는 것입니다. 이 과정은 React 개념을 각각 설명하는 데서 끝나지 않고, TaskFlow라는 작업 관리 프로젝트를 32회에 걸쳐 조금씩 발전시키는 방식으로 진행합니다.
상단에서는 이 글만 찾아온 독자도 React 학습 순서와 개발환경을 이해할 수 있게 설명합니다. 하단에서는 처음부터 과정을 따라오는 독자를 위해 TaskFlow의 첫 프로젝트를 생성합니다.
이번 글에서 배우는 내용
- React를 시작하기 전에 필요한 JavaScript·TypeScript 수준
- 컴포넌트 → JSX → props·합성 → state → Effect → 비동기 UI → 라우팅·성능 순서
- Node.js와 npm 설치 여부 확인
- Vite의 React + TypeScript 템플릿으로 첫 프로젝트 생성
- TaskFlow가 이후 회차에서 어떻게 발전하는지
- React를 배우면서 자주 만나는 오류를 어느 시점에 학습하는지
먼저 알아야 할 내용
React를 시작하기 전에 JavaScript 전체를 암기할 필요는 없습니다. 다만 함수, 객체와 배열, 구조 분해, spread 문법, map·filter, import/export 정도는 읽고 수정할 수 있어야 합니다.
이 과정의 TaskFlow는 처음부터 TypeScript로 진행합니다. 따라서 기본 타입, 객체 타입, 함수 매개변수 타입 정도는 알고 시작하는 편이 좋습니다. TypeScript 자체가 낯설다면 BlogFlow의 TypeScript 초급 과정을 먼저 보는 것이 더 효율적입니다.
목차
다음 학습
다음 글에서는 같은 프로젝트를 새로 만들지 않습니다. 지금 만든 step-01-first-run을 그대로 사용해 Vite의 파일 구조, 진입점, npm scripts, dev·build·preview 차이를 확인하고 TaskFlow의 기본 화면을 정리합니다.
다음 글: React Vite 사용법: Vite 8 프로젝트 생성·실행·빌드
공식 문서
이 글이 도움이 되었나요?
읽음 기록
읽음 — / 전체 33개 · 필수 27개
새 글 받아보기
RSS 리더에서 BlogFlow의 새 글을 확인할 수 있습니다.
