[React] React 소개 및 프로젝트 생성

안녕하세요. 

이번 글에서는 React가 어떤 라이브러리인지 간단히 살펴보고, Vite와 TypeScript를 활용해 React 개발 환경을 구성하는 방법을 소개해 드리겠습니다. 

 

목차

1. React란

2. 프로젝트 생성

 

 

1. React란

React 는 사용자 인터페이스 (UI) 를 효율적으로 구축할 수 있도록 도와주는 JavaScript 라 이브러리입니다. Meta(Facebook) 에서 개발되었으며, 현재는 다양한 웹 서비스와 애플리케이션에서 널리 사용되고 있습니다.

 

React의 주요 특징

 

컴포넌트 기반 구조

React 는 화면을 컴포넌트라는 작은 단위로 나눠서 구성합니다. 예를 들어 웹 페이지가 있다고 하면 헤더는 본문은, 푸터는 이렇게 각각의 부분을 독립적인 파일로 만들고, 조립하듯이 붙여서 하나의 앱을 만듭니다. 이컴포넌트들은 독립적이고 재사용이 가능하며, 하나의 컴포넌트를 수정하면 이 컴포넌트 를사용하는 모든 곳에 자동으로 반영되어 유지보수가 쉽고 유연한 개발이 가능합니다.

 

선언적 방식과 자동 업데이트

React 는 선언형 프로그래밍 방식을 따릅니다. 개발자는 UI 의 결과만 선언하면, React 가 상태 (state) 에 따라 어떤 UI 를 보여줘야 하는지 판단하고, DOM 업데이트는 자동으로 처리합니다. 즉 제목 없음, 상태에 따라 어떤 UI 가 나타나야 하는지를 선언하기만 하면 됩니다.

 

Virtual DOM 을 이용한 고성능 렌더링

기존의 javascript 개발에서는 DOM 을 직접 조작했기 때문에 성능 저하가 자주 발생했습니다. React 에서는 이를 개선하기 위해 Virtual DOM 을 사용합니다. React 는 브라우저의 실제 DOM 대신 메모리상의 가상 DOM 을 먼저 업데이트한 후, 기존 Virtual DOM과 변경된 Virtual DOM을 비교하여 실제 DOM 에 꼭 필요한 부분만 업데이트 합니다. 이방식은 불필요한 DOM 조작을 줄여주어, 복잡한 UI 에서도 빠르고 부드러운 사용자 경험을 제공할 수 있습니다.

 

JSX 문법

React 는 HTML 과 유사한 문법인 JSX(JavaScript XML)을 사용합니다. JSX 를 활용하면 자바스크립트 코드 안에서 마치 HTML 처럼 UI 를 구성할 수 있어 가독성이 좋고 작성이 직관적입니다.

 

2. 프로젝트 생성

지금까지 리액트에 대해 알아보았으니, 이제 프로젝트 개발 환경 세팅을 해보도록 하겠습니다. 이번 프로젝트에서는 Vite 와 TypeScript를 사용하여 빠르고 효율적인 React 개발 환경을 구성할 예정입니다.

 

Vite

기존의 CRA(Create React App) 보다 훨씬 빠른 빌드 속도와 개발 서버 반응 속도를 제공합니다. 브라우저가 지원하는 ES Modules 를 활용하여 불필요한 번들링 없이 개발이 가능합니다. 또한 내부적으로 esbuild 를 사용하여 의존성 처리 속도도 매우 빠릅니다.

 

TypeScript

정적 타입을 지원하는 JavaScript 의 상위 언어입니다. javascript 의 유연함은 유지하면서, 컴파일 단계에서 오류를 사전에 탐지할 수 있어 더욱 안정적인 개발이 가능합니다. 또한 코드의 구조와 타입이 명확해지기 때문에 프로젝트 규모가 커질수록 유지보수와 협업에 유리합니다.

 

Node.js 설치

먼저 , Node.js 공식 사이트에서 Node.js 를 설치해 주세요. ( 권장 : LTS 버전 )

https://nodejs.org/en.

 

원하는 위치에 react 프로젝트 생성

터미널을 열고 아래 명령어를 실행해 프로젝트를 생성합니다.

npm create vite@latest

 

 

그리고 프롬프트가 나오면 다음과 같이 선택합니다.

 

의존성 설치 및 프로젝트 실행

필요한 패키지를 설치하고 개발 서버를 실행합니다.

npm install npm i

npm run dev

 

 

정상적으로 실행되면 브라우저에서 Vite 기본 페이지를 확인할 수 있습니다 .

 

지금까지 React 를 이용해 프로젝트 생성부터 실행까지 진행해보았습니다.

https://ko.legacy.reactjs.org/ 에서 좀 더 심화된 내용을 제공하고 있으니, React 를 더 사용해보고 싶은 분들은 참고하면 좋을 듯 합니다 .