on my way
한 입 크기로 잘라먹는 리액트 4장: 리액트 시작하기 본문
리액트 시작하기: 탄생 배경과 기본 설정
이번 포스팅에서는 리액트의 탄생 배경과 리액트 앱을 시작하는 방법에 대해 다루겠습니다.
리액트는 복잡한 웹 서비스를 쉽고 빠르게 개발할 수 있는 컴포넌트 기반의 프레임워크입니다.
리액트의 기본 개념과 설치 방법, 그리고 간단한 프로젝트 생성 과정을 살펴보겠습니다.
리액트의 탄생
리액트는 페이스북 개발팀에 의해 2013년 오픈소스로 공개되었습니다.
페이스북은 다양한 사용자와의 상호작용이 빈번한 대규모 웹 애플리케이션을 쉽게 구축할 수 있는 기술이 필요했고, 이에 따라 리액트를 개발하게 되었습니다.
리액트는 컴포넌트 기반 구조를 통해 복잡한 웹 애플리케이션을 모듈화하고, 효율적으로 관리할 수 있는 장점을 가지고 있습니다.
리액트의 주요 특징
- 컴포넌트 기반의 유연한 구조 리액트는 UI를 독립적인 컴포넌트로 분리하여 개발할 수 있습니다. 각 컴포넌트는 재사용이 가능하고, 필요한 부분만 업데이트할 수 있어 유지보수가 용이합니다.
function MyHeader() {
return (
<header>
<h1>안녕하세요 수정된 이정환입니다.</h1>
</header>
);
}html 요소를 반환하는 함수를 컴포넌트라 한다.
2. 버추얼 돔(Virtual DOM)
리액트는 실제 돔 대신 가상 돔을 사용하여 효율적으로 업데이트합니다.
변경 사항을 가상 돔에 적용한 후 실제 돔과 비교하여 최소한의 변경만 실제 돔에 반영합니다.
이를 통해 빠른 렌더링이 가능합니다.
돔 트리 구조와 리액트의 업데이트 방식
기존의 돔(Document Object Model)은 트리 구조로 이루어져 있으며, 요소를 찾고 업데이트하는 과정이 복잡할 수 있습니다. 돔 API를 통해 돔을 조작할 수 있지만, 요소가 많아질수록 특정 요소를 찾고 업데이트하는 데 시간이 오래 걸릴 수 있습니다. 리액트는 이러한 문제를 다음과 같이 해결합니다.
- 가상 돔(Virtual DOM) 리액트는 가상 돔을 사용하여 실제 돔의 사본을 메모리에 유지합니다. 업데이트가 필요할 때마다 가상 돔을 먼저 변경하고, 실제 돔과 비교하여 변경된 부분만 실제 돔에 반영합니다. 이를 통해 빠르고 효율적인 업데이트가 가능합니다.
- 전체 업데이트 리액트는 변경 사항이 발생하면 전체 컴포넌트를 다시 렌더링합니다. 하지만 가상 돔 덕분에 실제 돔에는 최소한의 변경만 반영되므로 성능이 크게 향상됩니다.
리액트 프로젝트 생성하기
리액트 프로젝트를 생성하기 위해 Create React App 도구를 사용할 수 있습니다.
Create React App은 복잡한 설정 없이 리액트 앱을 쉽게 생성할 수 있는 도구입니다.
- 프로젝트 디렉터리 생성
mkdir chapter4
cd chapter42 Create React App 설치 및 실행
npx create-react-app .
- 이 명령어는 현재 디렉터리에 새로운 리액트 앱을 생성합니다.
3. 프로젝트 실행
npm start리액트의 동작 원리
리액트 앱은 단일 페이지 애플리케이션(SPA)으로 동작합니다.
사용자가 특정 경로로 접근하면, 서버는 단 하나의 HTML 파일(index.html)을 반환하고, 이 파일 내의 루트 요소에 리액트 컴포넌트가 렌더링됩니다.
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);위 코드에서 ReactDOM.render 메서드는 App 컴포넌트를 루트 요소에 렌더링합니다.
App 컴포넌트는 애플리케이션의 주요 UI를 정의합니다.
컴포넌트 구조
리액트는 컴포넌트를 사용하여 UI를 구성합니다.
컴포넌트는 작은 단위의 모듈로, 각각 독립적으로 동작하며 재사용이 가능합니다.
예를 들어, App.js 파일에서 여러 개의 하위 컴포넌트를 조합하여 전체 UI를 구성할 수 있습니다.
// src/App.js
import React from 'react';
import MyHeader from './MyHeader';
import MyFooter from './MyFooter';
function App() {
return (
<div className="App">
<MyHeader />
<main>
<h2>메인 콘텐츠</h2>
</main>
<MyFooter />
</div>
);
}
export default App;이처럼 리액트는 컴포넌트를 조립하는 방식으로 웹 애플리케이션을 구성하며, 각 컴포넌트는 독립적으로 동작하고 재사용이 가능합니다.
리액트와 싱글 페이지 애플리케이션(SPA)
리액트는 싱글 페이지 애플리케이션(SPA)으로 동작합니다. 이는 사용자가 페이지를 이동할 때마다 서버에서 새로운 페이지를 받아오는 것이 아니라, 하나의 HTML 파일에서 필요한 부분만 동적으로 업데이트하는 방식입니다. 이를 통해 더 빠르고 부드러운 사용자 경험을 제공합니다.
- index.html
리액트 앱의 시작점은 public/index.html 파일입니다.
이 파일에는 단 하나의 <div id="root"></div> 요소만 포함되어 있습니다.
이 요소가 리액트 컴포넌트가 렌더링될 루트 요소입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
2. index.js
src/index.js 파일에서 리액트 컴포넌트를 루트 요소에 렌더링합니다.
ReactDOM.render 메서드를 사용하여 App 컴포넌트를 <div id="root"></div>에 렌더링합니다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
3. App 컴포넌트
App 컴포넌트는 애플리케이션의 주요 UI를 정의합니다. 여기에는 여러 개의 하위 컴포넌트가 포함될 수 있으며, 각 하위 컴포넌트는 독립적으로 동작합니다.
// src/App.js
import React from 'react';
import MyHeader from './MyHeader';
import MyFooter from './MyFooter';
function App() {
return (
<div className="App">
<MyHeader />
<main>
<h2>메인 콘텐츠</h2>
</main>
<MyFooter />
</div>
);
}
export default App;
결론
리액트는 컴포넌트 기반의 유연한 구조와 버추얼 돔을 이용한 빠른 업데이트를 통해 복잡한 웹 애플리케이션을 효율적으로 개발할 수 있는 프레임워크입니다.
'Computer Science > React' 카테고리의 다른 글
| 한 입 크기로 잘라먹는 리액트 7장: useReducer과 상태 관리 (0) | 2024.07.12 |
|---|---|
| 한 입 크기로 잘라먹는 리액트 6장: 라이프 사이클과 리액트 개발자 도구 (0) | 2024.07.11 |
| 한 입 크기로 잘라먹는 리액트 5장: 리액트의 기본 기능 다루기 (1) | 2024.07.09 |
| 한 입 크기로 잘라먹는 리액트 3장: Node.js (0) | 2024.07.08 |
| 한 입 크기로 잘라먹는 리액트 1-2장 (0) | 2024.07.08 |
