리액트 입문 — 컴포넌트로 만드는 웹

리액트란 무엇인가

리액트가 무엇을 해결하는지, 선언형 UI와 컴포넌트 개념이 왜 혁신적인지, 바닐라 JS와 무엇이 다른지 근본부터 이해합니다.

개발 환경 만들기 — Vite

Node.js 설치부터 Vite로 React+TypeScript 프로젝트 생성, 폴더 구조 이해, 개발 서버 실행까지 단계별로 진행합니다.

JSX 기초

JSX가 무엇인지, 어떻게 동작하는지, 표현식 삽입과 className, Fragment 등 핵심 문법을 실제 코드로 깊이 이해합니다.

컴포넌트 만들기

함수 컴포넌트를 선언하고 조합하는 방법, 컴포넌트를 파일로 분리하는 패턴, 재사용의 본질적 의미를 코드로 배웁니다.

Props로 데이터 전달

Props로 데이터를 자식 컴포넌트에 전달하고, 구조 분해·기본값·children·TypeScript 타입 지정까지 Props의 모든 것을 배웁니다.

State와 useState

State의 본질과 useState 훅의 동작 원리, 상태 변경이 리렌더링을 어떻게 일으키는지, 그리고 불변성 원칙을 왜 지켜야 하는지 깊이 이해합니다.

이벤트 처리

onClick, onChange, onSubmit 등 주요 이벤트 핸들러 등록 방법과 이벤트 객체 활용, 그리고 이벤트 버블링 이해까지 실전 중심으로 배웁니다.

조건부 렌더링

조건부 렌더링(&&, 삼항, early return)과 리스트 렌더링(map, key)을 실전 상황에서 올바르게 사용하는 방법과 흔한 실수를 배웁니다.

리스트 렌더링과 key

제어 컴포넌트 패턴으로 폼을 구현하는 방법, 다양한 입력 요소 처리, 폼 유효성 검사, 제출 처리까지 실전 폼 구현을 배웁니다.

폼 다루기

컴포넌트 스타일링의 여러 방법(인라인, CSS Module, Tailwind, 조건부)과 각각의 장단점, 그리고 실무에서 선택 기준을 배웁니다.

useEffect 기초

useEffect의 동작 원리와 실행 시점, 의존성 배열의 역할, 클린업 함수가 왜 필요한지를 구체적인 예시로 깊이 이해합니다.

데이터 가져오기(fetch)

fetch와 async/await로 실제 API 데이터를 가져오고, 로딩·에러·성공 상태를 처리하는 커스텀 훅 useFetch를 직접 만들어봅니다.

상태 끌어올리기

상태 끌어올리기 패턴으로 형제 컴포넌트 간 상태를 공유하는 방법과 컴포넌트 합성(Composition) 패턴의 실전 활용을 배웁니다.

컴포넌트 합성과 재사용

useRef로 DOM 요소에 직접 접근하고, 렌더링 없이 값을 유지하는 방법, forwardRef 패턴까지 useRef의 두 가지 역할을 완전히 이해합니다.

useRef와 DOM 접근

반복되는 상태 로직을 커스텀 훅으로 추출하는 방법, 좋은 커스텀 훅의 설계 원칙, useToggle·useLocalStorage·useDebounce 세 가지 실전 훅을 직접 만듭니다.

커스텀 훅 만들기

Context API로 Props drilling 없이 전역 상태를 공유하는 방법, Provider 패턴 설계, 그리고 Context 남용을 피하는 기준을 배웁니다.

Context API

useReducer로 복잡한 상태 로직을 액션 기반으로 관리하는 방법, reducer 패턴의 장점, useState vs useReducer 선택 기준을 실전 예제로 배웁니다.

useReducer

useMemo와 useCallback으로 불필요한 재계산·재생성을 방지하고, React.memo로 컴포넌트 리렌더링을 최적화하는 방법과 올바른 사용 기준을 배웁니다.

리스트 앱 실전 ①

미니 프로젝트: 투두 앱을 처음부터 완성까지 만들면서 지금까지 배운 useState, 이벤트, 리스트 렌더링, 조건부 렌더링을 실전에서 통합합니다.

리스트 앱 실전 ②

React Router v6로 SPA에서 여러 페이지를 구현하는 방법, 동적 라우팅, 중첩 라우팅, useNavigate, useParams를 실전 예제로 배웁니다.

라우팅 — React Router

TanStack Query(React Query)로 서버 상태를 관리하는 방법, useQuery와 useMutation, 캐싱과 자동 재패칭의 원리를 직접 만든 useFetch와 비교합니다.

스타일링 방법들

에러 바운더리(Error Boundary)와 Suspense로 로딩·에러 상태를 선언적으로 처리하는 방법, 프로덕션 수준의 에러 처리 패턴을 배웁니다.

리스트·상세 페이지 연결

환경변수(.env) 설정 방법과 Vite 빌드 최적화 원리, 그리고 Vercel·Netlify에 배포하는 전체 과정을 단계별로 배웁니다.

비동기 상태 관리 패턴

리액트 18의 핵심 기능인 동시성 렌더링(Concurrent Rendering), useTransition, useDeferredValue의 동작 원리와 실전 사용법을 배웁니다.

성능 기초 — memo

Zustand로 전역 상태를 단순하고 강력하게 관리하는 방법, 스토어 설계 패턴, devtools 연동, 슬라이스 패턴까지 실전 Context 대안을 배웁니다.

에러 처리와 경계

React Testing Library와 Vitest로 컴포넌트를 테스트하는 방법, 좋은 테스트의 기준, 사용자 관점 테스트 철학을 실전 코드로 배웁니다.

환경변수와 빌드

Next.js 15 App Router를 활용해 SSR, SSG, Server Components의 개념과 리액트 SPA와의 차이, 실무에서의 선택 기준을 배웁니다.

배포하기

컴포넌트 라이브러리(shadcn/ui, Radix UI) 활용법과 스타일 시스템 구축, 접근성(a11y) 원칙, 그리고 디자인 시스템 없이도 일관된 UI를 만드는 방법을 배웁니다.