React란?
React는 Facebook(현재 Meta)에서 개발한 JavaScript 라이브러리로, UI를 만들기 위해 사용됩니다. 컴포넌트 기반 아키텍처를 통해 효율적인 개발을 가능하게 하며, 가상 DOM(Virtual DOM)을 활용하여 빠른 렌더링 성능을 제공합니다.
React의 주요 특징
1. 컴포넌트 기반(Component-Based)
- UI를 독립적인 컴포넌트로 구성하여 재사용성과 유지보수성을 높입니다.
2.가상 DOM(Virtual DOM)
- 실제 DOM을 직접 조작하는 것이 아니라, 가상의 DOM을 활용하여 변경 사항을 최소한으로 반영하여 성능을 최적화합니다.
3.단방향 데이터 흐름(One-Way Data Binding)
- React는 데이터가 단방향으로 흐르도록 설계되어, 데이터 흐름을 예측하기 쉽고 디버깅이 용이합니다.
4.JSX(JavaScript XML)
- JavaScript 안에서 HTML과 비슷한 문법을 사용할 수 있도록 지원하는 문법입니다.
5.CSR(Client-Side Rendering)
-
React는 기본적으로 CSR(Client-Side Rendering, 클라이언트 사이드 렌더링) 방식을 사용합니다. 즉, 브라우저에서 JavaScript를 실행하여 UI를 렌더링하며, 필요한 데이터를 API를 통해 비동기적으로 가져오는 방식입니다.
-
CSR 방식은 빠른 사용자 인터랙션과 동적인 UI 구성에 유리하지만, 초기 로딩 속도가 느려질 수 있습니다. 이 문제를 보완하기 위해 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG) 같은 기법을 활용하기도 합니다.
React를 사용하는 이유
-
빠른 렌더링 속도 : 가상 DOM을 사용하여 최소한의 업데이트로 화면을 갱신합니다.
-
재사용 가능한 컴포넌트 : 같은 UI 요소를 여러 곳에서 쉽게 활용할 수 있습니다.
-
커뮤니티 및 생태계 : 많은 개발자들이 사용하며, 다양한 라이브러리와 확장 기능이 존재합니다.
-
CSR 기반 동적 웹 개발 : 클라이언트에서 JavaScript를 실행하여 즉각적인 UI 업데이트가 가능합니다.
React 설치 및 설정 (간단한 예제)
1. React 프로젝트 생성 (Create React App 이용)
npx create-react-app my-app
cd my-app
npm start2.첫 번째 컴포넌트 만들기
import React from 'react';
function Hello() {
return <h1>Hello, React!</h1>;
}
export default Hello;3.App.js에서 컴포넌트 사용하기
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
</div>
);
}
export default App;마무리
React는 현대적인 프론트엔드 개발에서 널리 사용되는 라이브러리로, UI를 보다 효율적으로 설계할 수 있도록 도와줍니다. 또한, CSR 방식을 기반으로 하여 빠른 사용자 경험을 제공하지만, SSR과 SSG 같은 기법을 함께 고려하면 더욱 최적화된 웹 애플리케이션을 개발할 수 있습니다.
앞으로 차근차근 더 깊이 있는 개념을 다루며 실력을 키워보겠습니다!
다음 글에서는 React의 컴포넌트와 상태(State)에 대해 알아보겠습니다!
