본문으로 건너뛰기
Advertisement

React: 선수 지식 및 환경 세팅 (Step 1)

대상 버전: React 18 / 19+ 공식 문서: React Documentation

1. 리액트(React)를 배우기 전에​

리액트는 선언형(Declarative) UI 라이브러리입니다. 아래의 선수 지식 이 갖춰져 있다면 훨씬 수월하게 학습할 수 있습니다.

  • ES6+ 최신 문법: 구조 분해 할당(Destructuring), 전개 연산자(...), 화살표 함수, 모듈(import/export).
  • DOM 개념: 웹 문서가 트리 구조로 이루어져 있다는 이해.
  • npm/yarn: 패키지 매니저 사용법 기초.

2. 개발 환경 구축 (Local Setup)​

현대적인 React 프로젝트를 시작하는 가장 빠른 방법은 Vite 를 사용하는 것입니다.

프로젝트 생성 및 실행​

# 1. Vite 프로젝트 생성 (React & JavaScript 선택)
npm create vite@latest my-react-app -- --template react

# 2. 프로젝트 폴더 진입
cd my-react-app

# 3. 의존성 설치
npm install

# 4. 개발 서버 실행
npm run dev

3. 리액트의 핵심 철학​

  • 컴포넌트(Component) 기반: UI를 독립적이고 재사용 가능한 조각으로 나눕니다.
  • Virtual DOM: 실제 DOM이 아닌 가상 DOM을 조작하여 성능 최적화를 자동으로 수행합니다.
  • 단방향 데이터 흐름: 데이터는 언제나 부모로부터 자식으로만 흐릅니다 (Props).
Advertisement
Advertisement