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

리액트란 무엇인가

리액트가 무엇을 해결하는지, 선언형 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)을 실전 상황에서 올바르게 사용하는 방법과 흔한 실수를 배웁니다.