React란?

사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리입니다.

React는 Single Page Application(SPA)를 구현하는 데 주로 사용됩니다. SPA는 페이지를 새로고침하지 않고도 동적으로 현재 페이지의 내용을 변경할 수 있는 웹 애플리케이션입니다. 이를 통해 사용자에게 부드러운 웹 페이지 이동과 뛰어난 사용자 경험을 제공할 수 있습니다.

React는 이러한 SPA를 쉽게 구현할 수 있게 도와주며, 이는 React의 주된 장점 중 하나입니다.

React의 특징

1. Component-Based: React는 컴포넌트 기반의 라이브러리입니다. 즉, UI를 개별적인 컴포넌트로 분리하고 이 컴포넌트들을 조합하여 복잡한 UI를 구현합니다. 이를 통해 코드의 재사용성을 높이고 유지보수를 용이하게 합니다.
2. Virtual DOM: React는 Virtual DOM을 사용합니다. 이는 실제 DOM을 직접 조작하는 대신, 이를 추상화한 JavaScript 객체를 사용합니다. 이를 통해 렌더링 성능을 향상시키고, 개발자가 DOM 조작에 대한 부담을 덜 수 있게 합니다.
3. Unidirectional Data Flow: React는 단방향 데이터 흐름을 가집니다. 이는 데이터가 부모 컴포넌트에서 자식 컴포넌트로만 전달됨을 의미합니다. 이를 통해 애플리케이션의 상태를 예측 가능하게 관리할 수 있습니다.

React 설치하기

React를 설치하려면 Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다. 이후에는 다음 명령어를 통해 React를 설치할 수 있습니다.

npx create-react-app my-app

이 명령어는 "my-app"이라는 이름의 새로운 React 애플리케이션을 생성합니다.

CRA(Create-React-App)는 React 개발 환경을 빠르게 설정할 수 있도록 도와주는 도구입니다. Babel, Webpack 등의 복잡한 설정 없이도 React 애플리케이션을 쉽게 시작할 수 있게 해줍니다.

CRA(Create-React-App) 폴더구조

create-react-app을 통해 생성된 React 프로젝트의 폴더 구조는 아래와 같습니다: