React 개념 정리: 가상 DOM·컴포넌트·장단점 분석
React는 페이스북(Facebook)에서 개발한 UI 라이브러리로, 단일 페이지 애플리케이션(SPA) 개발을 효율적으로 만들어 줍니다. 컴포넌트 기반 구조와 가상 DOM 기술을 통해 빠른 렌더링과 재사용성을 제공합니다.
1. 핵심 특징
1.1 컴포넌트 기반 아키텍처
컴포넌트는 독립적인 UI 단위입니다. 하나의 화면을 여러 컴포넌트로 분리하여 관리하면, 코드 재사용성과 유지보수성이 크게 향상됩니다.
1.2 가상 DOM(Virtual DOM)
React는 실제 DOM 대신 메모리 상의 가상 DOM을 사용해 변경사항을 계산한 뒤, 최소한의 실제 DOM 업데이트만 수행합니다. 이로써 렌더링 성능이 개선됩니다.
1.3 단방향 데이터 흐름 (One-way Data Binding)
데이터는 부모 컴포넌트에서 자식 컴포넌트로만 전달됩니다. 예측 가능한 데이터 흐름 덕분에 디버깅과 상태 관리를 더 수월하게 할 수 있습니다.
1.4 JSX 문법
JSX는 JavaScript 코드 안에 HTML 형태의 코드를 작성할 수 있게 해 주는 문법입니다. 익숙해지면 UI 작성이 직관적이고 가독성이 높아집니다.
2. React의 장단점
| 구분 | 장점 | 단점 |
|---|---|---|
| 성능 | 가상 DOM으로 빠른 갱신 | 초기 로드 시 번들 용량 부담 |
| 개발 생산성 | 컴포넌트 재사용으로 코드 간결 | JSX·훅(Hooks) 러닝 커브 |
| 생태계 | 풍부한 라이브러리·툴 | 버전 업 시 생태계 혼란 가능성 |
3. Vue.js & Angular와 비교
React와 함께 자주 비교되는 프레임워크/라이브러리는 Vue.js와 Angular입니다. 아래 표에서 주요 차이를 확인해 보세요.
| 비교 항목 | React | Vue.js | Angular |
|---|---|---|---|
| 개발사 | 페이스북 | Evan You | 구글 |
| 학습 곡선 | 중간 (JSX, Hooks) | 낮음 (템플릿 문법) | 높음 (TypeScript, MVC 구조) |
| 번들 크기 | 약 40KB | 약 23KB | 약 500KB |
| 데이터 바인딩 | 단방향 | 양방향 지원 | 양방향 지원 |
| 생태계 | 리액트 전용 라이브러리 풍부 | 공식 플러그인 적음 | 통합형 프레임워크 |
4. 공식 문서 및 참고 링크
5. 요약 및 결론
이 글에서는 React의 핵심 개념인 컴포넌트, 가상 DOM, 단방향 데이터 흐름, JSX 문법과 장단점을 살펴보았습니다. React는 빠른 렌더링과 높은 재사용성을 제공해 복잡한 UI 개발에 적합하며, Vue나 Angular와는 다른 생태계와 철학을 갖고 있습니다. 다음 글에서는 실제 환경 구성 및 첫 컴포넌트 작성 방법을 다룹니다.
이 글이 도움이 되셨다면 공유 부탁 드립니다.
