리액트(React)란 무엇인가?
React는 Meta에서 만든 사용자 인터페이스(UI)를 렌더링하기 위한 JavaScript 라이브러리이다!
React를 통해 작은 요소들을 재사용 가능하고 중첩할 수 있는 컴포넌트로 조합할 수 있다.
이런 React 컴포넌트는 React가 브라우저에 렌더링하는 마크업을 포함할 수 있는 JavaScript 함수로 그 마크업을 표현하기 위해 JSX라는 확장된 문법을 사용한다. (JSX는 HTML과 유사하다.)
리액트를 왜 사용할까? : 리액트의 핵심 철학
리액트는 다음과 같은 핵심 철학을 바탕으로 설계되었다.
이러한 철학은 복잡한 화면도 구조적으로 관리 가능하며 성능 최적화에 알맞다.
1. 컴포넌트 기반(Component-based)
화면을 작은 컴포넌트로 나누고, 이를 조합해서 전체 페이지를 만든다.
컴포넌트 기반 아키텍처란, 특정 기능을 수행하는 독립적인 단위인 컴포넌트를 이용해서 프론트엔드를 만들어가는 구조를 의미한다.
[사용예시]
"Hello, I'm Jamie!! Let's study together"라는 텍스트를 출력하는 함수형 컴포넌트를 만들어보자.
<div> 요소 안에 텍스트를 출력한다.
import React from 'react';
const IntroduceComponent = () => {
return <div>Hello, I'm Jamie! Let's study together</div>;
};
export default IntroduceComponent;
이 컴포넌트를 부모 컴포넌트에서 렌더링해서 사용할 수 있다.
App 컴포넌트에서 IntroduceComponent를 import하여 적용한 것을 볼 수 있다!
// App.js (부모 컴포넌트)
import React from 'react';
import IntroduceComponent from './IntroduceComponent';
const App = () => {
return (
<div>
<h2>Welcome to my React App!</h2>
<IntroduceComponent />
</div>
);
};
export default App;
2. 선언형 UI
"무엇을 보여줄지"에 집중한다.
개발자가 UI의 최종 모습만 선언하면 리액트가 이를 자동으로 구현해주어, 복잡한 UI 개발을 더 쉽게 만든다.
3. 가상 DOM(Virtual DOM)
실제 브라우저 DOM을 직접 다루지 않고, 가상 DOM을 이용해서 변경된 부분만 빠르게 갱신한다.
이를 통해 최소한의 DOM 조작이 가능하여 신속한 UI 업데이트를 가능하게 하고 성능을 최적화 시킨다.
[어려워요]
사실 공부할 때 제일 이해가 어려운 개념이 Virtual DOM이었다. 도대체 실제 DOM과 가상 DOM이 뭐지??
동아리 면접 준비를 할 때 이해하지 못하고 급하게 외웠던 기억이 난다. (하지만 지금의 난 알지.)
하단에 이어서 따로 설명하도록 하겠다.
4. SPA(Single Page Application)
화면이 전환될 때 전체 페이지를 새로고침 하지 않고 필요한 부분만 업데이트하므로 사용자 경험이 뛰어나다.
라이브러리 vs 프레임워크
공식 홈페이지에서는 React를 **라이브러리**라고 정의하고 있었다.
라이브러리와 프레임워크의 차이가 무엇인지 전혀!! 모르겠어서 정리해보았다.
라이브러리
- 소프트웨어를 개발할 때, 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임을 라이브러리라고 한다!
- 즉 특정 기능을 모아 둔 코드, 함수의 집합 또는 코드 작성 시 활용 가능한 도구들의 집합을 말한다.
- 라이브러리는 개발자가 필요한 기능을 호출하여 사용할 수 있다.
- 프레임워크와는 달리 개발자가 코드의 흐름과 제어를 직접 관리한다.
- 대표적인 예로 jQuery, React, Axios 등이 있다.
프레임워크
- 프레임워크는 개발을 위한 기본 구조와 규칙을 제공하는 도구이다.
- 개발자는 프레임워크가 제공하는 규칙을 인터페이스에 따라 코드를 작성해야 한다.
- 프레임워크는 애플리케이션의 흐름과 제어를 관리하며, 필요한 기능과 도구를 제공한다.
- 대표적인 예로 백엔드 프레임워크 Spring, 프론트엔드 프레임워크 Anguler, Vue 등이 있다.
둘의 가장 큰 차이점은 제어의 주체가 누구인가 하는 점이다.
프레임워크는 개발자가 어떻게 개발을 해야하는지에 대한 지침을 제공하므로, 개발자는 규칙을 따라야 한다.
라이브러리는 개발자가 필요한 라이브러리를 활용하는 방식으로 개발자에게 제어권이 주어진다.
리액트는 애플리케이션의 전체 구조나 아키텍쳐를 결정하지 않고, 개발자는 필요한 부분에 리액트를 적용하여
UI를 구성하고 관리할 수 있다는 점에서 라이브러리로 분류되는 것이었다!
Virtual DOM
DOM(Document Object Model)
문서 객체 모델(The Document Object Model, 이하 DOM)은 HTML, XML 문서의 프로그래밍 interface 이다.
DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
즉 HTML Element들을 담고 있는 웹페이지를 Document라고 하는데, 브라우저는 이를 분석해 페이지를 띄워준다.
DOM이란 이런 HTML Element들을 tree 형태로 표현한 것이다.
Vitrual DOM
"Virtual DOM은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다." - 라고 React 공식 홈페이지가 말했다.
즉 가상 DOM은 실제 DOM의 복제본을 메모리 상에 구조화한 가짜 DOM이다!!
실제 DOM을 조작하는 방식이 아니라 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링하는 방식으로 작동한다.
리액트는 실제 DOM의 UI를 가진 자바스크립트 객체를 메모리상에 가지고 있다. 가상 돔은 변화를 감지하면 재조정(Reconcilation)과정을 통하여 실제 DOM과 동기화 한다. 재조정 과정은 크게 3단계로 나뉜다.
- UI가 변경을 감지하면 UI를 Virtual DOM으로 렌더링한다. (실제 화면상 렌더링 되는 것이 아닌 비교를 위한 가상 렌더링)
- 현재 Virtual DOM과 이전 Virtual DOM을 비교(diffing)해 차이를 계산한다.
- 변경된 부분을 실제 DOM에 반영한다.(patching)
이렇게 Virtual DOM을 사용하면 바뀐 부분만 골라서 적용하기 때문에 실제 DOM 조작을 최소화하여 렌더링 성능을 향상시킬 수 있게 된다!
거대한 커뮤니티
내가 참고하려고 노력하는 React 공식 홈페이지와 같이 리액트는 넓은 커뮤니티를 가지고 있다.
덕분에 공식 문서, GitHub, 커뮤니티 포럼 등 다양한 정보를 통해 답을 얻을 수 있다!!
마무리
리액트는 단순한 라이브러리를 넘어, 개발자가 더 직관적이고 효율적으로 코드를 작성할 수 있게 도와주는 든든한 도구입니다.
앞으로 포스팅에서도 리액트의 다양한 기능과 활용법을 차근차근 풀어가 보겠습니다. 함께 공부해요!!
'React' 카테고리의 다른 글
| [React] useContext 활용하기 (0) | 2025.09.26 |
|---|---|
| [React] React + Vite + TypeScript 프로젝트 생성하기 (0) | 2025.09.09 |