React는 현대 웹 애플리케이션 개발에서 널리 사용되는 라이브러리입니다. 사용자 인터페이스(UI)를 구축하기 위해 설계된 React는 컴포넌트 기반 아키텍처와 가상 DOM(Virtual DOM)을 활용하여 효율적이고 유지보수가 쉬운 코드를 작성할 수 있게 해줍니다. 이번 글에서는 React의 기본 개념과 동작 순서를 쉽게 이해할 수 있도록 설명해드리겠습니다.
1. 프로젝트 구조
React 애플리케이션의 구조는 일반적으로 다음과 같습니다:
my-app/
|-- public/
| |-- index.html
|-- src/
| |-- index.js
| |-- App.js
| |-- index.css
| |-- App.css1.1. index.html
index.html 파일은 웹브라우저에서 가장 먼저 실행되는 파일입니다. 이 파일은 기본적인 HTML 구조를 포함하고 있으며, React 애플리케이션이 렌더링될 루트 DOM 노드를 정의합니다.
예시:
<!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> <!-- React 애플리케이션이 렌더링될 위치 -->
</body>
</html>1.2. index.js
index.js 파일은 index.html이 열리고 나서 실행되는 파일로, React 코드들 중 가장 먼저 실행되는 파일입니다. 이 파일에서는 ReactDOM을 사용하여 React 컴포넌트를 루트 DOM 노드에 렌더링합니다.
예시:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App'; // 메인 애플리케이션 컴포넌트
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);1.3. index.css
index.css 파일은 전체 애플리케이션에 적용될 전역 스타일을 정의합니다. 이 파일은 index.js 파일에서 import 되어 사용됩니다.
예시:
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}1.4. App.js
App.js 파일은 메인 애플리케이션 컴포넌트를 정의합니다. 이 파일에서 다른 컴포넌트들을 조합하여 전체 애플리케이션의 UI를 구성합니다.
예시:
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>안녕 리액트!</h1>
</header>
</div>
);
}
export default App;1.5. App.css
App.css 파일은 App.js 파일에 적용될 스타일을 정의합니다. 컴포넌트 단위로 스타일을 분리하여 관리할 수 있습니다.
예시:
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}2. React 동작 원리
React는 컴포넌트 기반 아키텍처와 가상 DOM을 사용하여 UI를 효율적으로 관리합니다.
2.1. 컴포넌트 기반 아키텍처
React 애플리케이션은 UI를 재사용 가능한 컴포넌트 단위로 분할합니다. 각 컴포넌트는 독립적으로 동작하며, 자신의 상태(state)와 속성(props)을 가질 수 있습니다.
2.2. 가상 DOM(Virtual DOM)
React는 가상 DOM을 사용하여 UI 변화를 효율적으로 관리합니다. 가상 DOM은 실제 DOM의 경량 복사본으로, 상태 변화가 발생하면 React는 가상 DOM에서 먼저 변경을 적용한 후, 이를 실제 DOM과 비교하여 최소한의 변경 사항만 실제 DOM에 적용합니다. 이를 통해 성능을 최적화할 수 있습니다.
2.3. 데이터 흐름
React는 단방향 데이터 흐름을 따릅니다. 상위 컴포넌트에서 하위 컴포넌트로 데이터가 전달되며, 하위 컴포넌트는 상위 컴포넌트로 데이터를 직접 전달할 수 없습니다. 대신 콜백 함수를 사용하여 상위 컴포넌트에 알림을 보낼 수 있습니다.
2.4. 상태 관리
컴포넌트는 자신의 상태를 관리할 수 있으며, 상태가 변경되면 React는 자동으로 해당 컴포넌트를 다시 렌더링합니다. 상태 관리는 useState와 같은 React Hook을 사용하여 처리합니다.
2.5. React Hooks
React 16.8 이후로 도입된 Hook은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해줍니다. 대표적인 Hook으로는 useState, useEffect 등이 있습니다.
마무리
이 글에서는 React의 기본 개념과 동작 순서를 살펴보았습니다. React를 처음 공부하는 분들이라면, 먼저 프로젝트 구조와 각 파일의 역할을 이해하고, 컴포넌트 기반 아키텍처와 가상 DOM의 개념을 파악하는 것이 중요합니다. 이를 통해 React의 강력한 기능을 활용하여 효율적이고 유지보수가 쉬운 애플리케이션을 개발할 수 있습니다.
