1단계: 리액트 시작하기

1-1. React란 무엇인가?

React는 Facebook이 개발한 사용자 인터페이스(UI)를 구축하기 위한 자바스크립트 라이브러리입니다. 컴포넌트 기반, 선언형 프로그래밍, 가상 DOM이라는 특징으로 대규모 UI 개발을 단순화합니다.

1-2. React의 특징 요약

• 선언형 UI
• 컴포넌트 기반 구조
• Virtual DOM 기반 성능 최적화
• 단방향 데이터 흐름

1-3. SPA란 무엇인가?

SPA(Single Page Application)는 전체 페이지를 매번 새로 불러오는 것이 아니라 필요한 데이터만 갱신해 사용자 경험을 개선합니다.

• 페이지 전환 시 전체 새로고침 없음
• 클라이언트 라우팅 사용
• SEO 문제는 SSR로 해결

1-4. 개발 환경 구성

• Node.js, npm 설치
• VS Code 설치 및 추천 확장
• Chrome + React DevTools

node -v
npm -v

1-5. CRA 없이 React 프로젝트 만들기

Webpack과 Babel을 직접 설정하여 React 프로젝트의 내부 동작을 이해합니다.

npm install react react-dom
npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

1-6. Babel과 Webpack 설정 기본

• .babelrc로 JSX 및 최신 문법 트랜스파일
• webpack.config.js로 번들링과 dev 서버 구성
• HtmlWebpackPlugin으로 HTML 파일 생성 자동화

1-7. 필수 용어 정리

• JSX
• Component
• Props
• State
• Hook
• Virtual DOM

요약

• React는 UI 구축에 특화된 라이브러리로 컴포넌트 기반 구조를 사용함
• SPA 방식으로 동작하며 사용자 경험을 향상시킴
• CRA 없이 구성함으로써 내부 빌드 시스템을 이해할 수 있음
• JSX, Props, State, Hook 등 핵심 용어 숙지 필요

심화학습

Q1. CRA 없이 구성한 프로젝트에서 가장 중요한 학습 포인트는?
A1. Webpack과 Babel의 설정을 직접 작성하면서 모듈 번들링과 트랜스파일링의 개념을 체감할 수 있다는 점이다. 자동화된 설정이 어떻게 작동하는지 이해하면 문제 해결 능력이 높아진다.

Q2. React가 뷰(View) 레이어만 담당한다는 말의 의미는?
A2. 전체 애플리케이션 구조를 강제하지 않으며, 라우팅, 상태관리, 데이터 요청 등은 외부 도구를 통해 구성해야 한다는 의미다. React는 UI 구성에만 집중한다.

Q3. SPA에서의 페이지 전환은 어떻게 처리되는가?
A3. 전통적인 HTML 페이지 전환이 아닌, JavaScript 라우팅을 통해 URL 변경에 맞는 컴포넌트를 렌더링함으로써 실제 페이지 이동 없이 뷰를 바꾼다.