React 소개

React 소개와 기본 개념

React란?

React는 Facebook(현 Meta)에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스를 구축하기 위한 효율적이고 유연한 도구입니다. 웹 애플리케이션의 프론트엔드 개발에 널리 사용되며, 모바일 애플리케이션(React Native)에도 확장되어 사용됩니다.

React의 핵심 특징

1. 컴포넌트 기반 아키텍처
   • UI를 독립적이고 재사용 가능한 조각(컴포넌트)으로 나누어 개발
   • 각 컴포넌트는 자체 상태와 로직을 가질 수 있음
   • 복잡한 UI를 관리하기 쉬운 작은 부분으로 분리
2. 가상 DOM(Virtual DOM)
   • 실제 DOM 조작의 비효율성을 해결하기 위한 개념
   • 변경사항을 실제 DOM에 직접 적용하지 않고, 메모리에 있는 가상 DOM에 먼저 적용한 후 최적화된 방식으로 실제 DOM에 반영
   • 성능 향상과 렌더링 최적화에 기여
3. 선언적 프로그래밍
   • "어떻게(How)" 보다는 "무엇을(What)" 정의하는 방식으로 UI 작성
   • 상태가 변경되면 React가 자동으로 UI를 업데이트
   • 코드의 가독성과 예측 가능성 향상
4. 단방향 데이터 흐름
   • 데이터는 부모 컴포넌트에서 자식 컴포넌트로 흐름 (props)
   • 명확한 데이터 흐름으로 디버깅과 이해가 용이
   • 애플리케이션의 상태 관리 단순화

React 시작하기

개발 환경 설정

1. Node.js 설치
   • React 개발을 위해 Node.js와 npm(Node Package Manager)이 필요합니다.
   • Node.js 공식 사이트에서 다운로드 및 설치
   • 설치 후 터미널에서 node -v와 npm -v로 설치 확인
2. Create React App 사용
   • create-react-app은 React 애플리케이션을 쉽게 시작할 수 있는 공식 도구입니다.
   • 개발 서버, 빌드 프로세스, 테스트 환경 등이 모두 설정됩니다.
   • 브라우저에서 http://localhost:3000으로 접속하여 앱 실행 확인
3. npx create-react-app my-app cd my-app npm start

React의 기본 구조

새 React 프로젝트의 기본 구조는 다음과 같습니다:

my-app/
  ├── node_modules/    # 프로젝트 의존성 패키지들
  ├── public/          # 정적 파일들
  │   ├── index.html   # 기본 HTML 템플릿
  │   └── ...
  ├── src/             # 소스 코드
  │   ├── App.js       # 메인 컴포넌트
  │   ├── index.js     # JavaScript 진입점
  │   └── ...
  ├── package.json     # 프로젝트 설정 및 의존성
  └── ...

• public/index.html: 웹 페이지의 기본 HTML 템플릿
• src/index.js: JavaScript 진입점, React 앱을 DOM에 렌더링
• src/App.js: 메인 React 컴포넌트
• package.json: 프로젝트 의존성 및 스크립트 정의