[React] 리액트 개요 및 환경설정 가이드

https://ko.react.dev/

React

 

 

💡리액트(React)란?

리액트(React)는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다. 리액트는 MVC(Model-View-Controller), MVVM(Model-View-ViewModel)과 같은 다른 프레임워크와는 달리 View만을 집중적으로 처리합니다. 리액트는 SPA(Single Page Application) 구조를 따르며, 하나의 HTML 파일(index.html)로 모든 화면을 구성합니다.

 

 

💡리액트의 주요 개념

✔️ 컴포넌트 기반 아키텍처

리액트는 컴포넌트라는 작은 단위로 UI를 구성합니다. 각 컴포넌트는 독립적이며 재사용 가능한 코드 블록으로, 자바스크립트와 HTML을 결합한 JSX 문법을 사용하여 화면의 특정 부분을 정의합니다. 이러한 컴포넌트는 다른 컴포넌트와 결합하여 복잡한 UI를 구성할 수 있습니다.

 

✔️ Virtual DOM

일반적으로 웹 브라우저는 DOM(Document Object Model)을 사용하여 HTML 문서를 트리 구조로 표현하고, 이를 통해 화면을 렌더링합니다. 하지만 DOM을 직접 조작하는 것은 성능에 부담을 줄 수 있습니다.

 

Virtual DOM은 실제 DOM을 가상으로 복제한 자바스크립트 객체입니다. 상태가 변경되면, 리액트는 새로운 Virtual DOM을 생성하고 이전 Virtual DOM과 비교하여 변경된 부분만 실제 DOM에 적용합니다. 이를 통해 브라우저의 렌더링 성능을 최적화할 수 있습니다.

 

✔️ 데이터 흐름: 단방향 데이터 바인딩

리액트는 단방향 데이터 바인딩을 사용합니다. 데이터는 부모 컴포넌트에서 자식 컴포넌트로만 흐르며, 이로 인해 데이터의 흐름을 예측하기 쉽고 디버깅이 용이합니다. 상태(state)와속성(props)을 통해 컴포넌트 간의 데이터를 전달하고, 이를 통해 컴포넌트의 UI를 동적으로 업데이트합니다.

 

✔️ Webpack과 번들링

리액트 애플리케이션에서는 Webpack과 같은 번들러가 사용됩니다. Webpack은 자바스크립트, CSS, 이미지 등의 자원을 하나의 파일로 묶어주는 도구로, 애플리케이션의 로딩 속도와 성능을 향상시킵니다. 리액트 프로젝트를 생성할 때 기본적으로 Webpack 설정이 포함되며, 이를 통해 프로젝트를 보다 효율적으로 관리할 수 있습니다.

 

 

💡리액트 환경설정

1️⃣ Node.js 설치

리액트 프로젝트를 시작하려면 Node.js가 필요합니다. Node.js는 리액트 애플리케이션이 서버처럼 동작할 수 있는 환경을 제공합니다. Node.js는 공식 웹사이트(https://nodejs.org/en)에서 다운로드하여 설치합니다.

 

Node.js를 설치하면, npm(Node Package Manager)도 자동으로 함께 설치됩니다. npm은 자바스크립트 패키지를 설치하고 관리하는 도구로, Node.js 환경에서 필요한 라이브러리와 패키지를 쉽게 설치하고 업데이트할 수 있도록 도와줍니다. 따라서 Node.js 설치 후 npm 명령어를 사용해 리액트 관련 패키지나 다른 개발 도구를 설치하고 관리할 수 있습니다.

패키지 관리자 명령문(npm, npx, yarn)
npm은 기본 패키지 관리자이며, npx는 npm 패키지 실행 도구로 사용됩니다. yarn은 안정성과 보안성에서 차별화된 다른 패키지 관리자입니다. 이들 도구는 모두 프로젝트 의존성 관리와 패키지 설치에 사용됩니다.

 

2️⃣ 에디터 설정 (VSCode)

리액트 개발에는 VSCode(Visual Studio Code)가 권장됩니다. 코드 가독성을 위해 인덴트 설정을 2칸으로 변경하는 것이 좋습니다. (File > Settings)

 

3️⃣ 프로젝트 생성 (npm create react-app)

리액트 프로젝트를 생성하려면 npm 명령어를 사용합니다. 이 때 프로젝트명은 소문자와 하이픈(-)만 사용해야 합니다.

이 명령어를 실행하면, 새로운 리액트 프로젝트가 생성되고 기본적인 설정이 완료됩니다.

npm create react-app 프로젝트명

 

4️⃣ 프로젝트 실행 (npm start)

생성한 프로젝트의 디렉토리로 이동한다음, npm 명령어를 실행하여 개발 서버를 시작합니다. 이 명령어를 실행하면 브라우저가 자동으로 열리며, 리액트 애플리케이션이 로드됩니다. 이제 로컬 환경에서 코드를 수정하면 실시간으로 변경 사항을 확인할 수 있습니다.

cd 프로젝트명
npm start

 

 

💡리액트 프로젝트 기본 구조

my-react-app/
├── node_modules/      # 📁 프로젝트 의존성 패키지가 설치되는 폴더 (자동 생성)
├── public/            # 📁 정적 파일들이 위치하는 폴더
│   ├── index.html           # 리액트 애플리케이션의 진입점 HTML 파일
│   └── ...                  # 기타 정적 자산 (이미지, 아이콘 등)

├── src/               # 📁 애플리케이션의 소스 파일들이 위치하는 폴더
│   ├── components/          # 📁 UI를 구성하는 재사용 가능한 컴포넌트들이 위치하는 폴더
│   │   ├── App.js                 # 주요 App 컴포넌트 파일✨
│   │   ├── App.css                # App 컴포넌트의 스타일 파일
│   │   └── ...                    # 추가적인 컴포넌트 파일들
│   ├── index.js             # 애플리케이션의 진입점 자바스크립트 파일✨
│   ├── index.css            # 전역 스타일 파일
│   ├── App.test.js          # App 컴포넌트에 대한 테스트 파일
│   └── ...                  # 추가적인 소스 파일들 (예: 유틸리티, 서비스 파일 등)

├── .gitignore         # Git 버전 관리에서 제외할 파일/폴더를 명시하는 파일

├── package.json       # 프로젝트 메타데이터와 의존성 정보가 포함된 파일✨

├── README.md          # 프로젝트에 대한 설명, 설치 방법 등을 포함한 파일

└── yarn.lock / package-lock.json # 의존성 관리 파일 (Yarn 또는 NPM 사용에 따라 생성)

✔️ index.js와 App.js의 역할

• index.js는 리액트 애플리케이션의 진입점(Entry Point)입니다. 이 파일은 ReactDOM 라이브러리를 사용하여 App 컴포넌트를 루트 DOM 노드에 렌더링합니다.
• App.js는 리액트 애플리케이션의 기본 컴포넌트입니다. create-react-app으로 생성된 프로젝트의 기본 코드는 간단한 JSX 코드를 반환하여 리액트의 구조를 설명하는 역할을 합니다.

✔️ Git에서 프로젝트 클론 후 문제 해결 (npm install)

Git에서 클론한 프로젝트의 경우 node_modules 폴더가 누락될 수 있습니다. 이 경우, 프로젝트의 최상위 디렉토리에서 npm install 명령어를 실행하여 `package.json`에 명시된 버전으로 필요한 모듈을 설치할 수 있습니다.

npm install