프론트엔드 개발자에게 가장 사랑받는 라이브러리 중 하나인 React 🌐
어떤 매력이 있길래 많은 개발자들의 Pick!을 받을 수 있었던 것일까?
🖐️ React의 등장
Multi Page Application MPA
초기의 웹 애플리케이션은 Multi Page Application MPA 방식으로 구성되어 있었다. 사용자가 페이지를 이동할 때마다 서버에서 HTML, CSS, JS를 전부 다시 받아야와야 했던 것이다. 이는 매 페이지 전환마다 전체 페이지를 다시 로딩해야 하므로 속도가 느렸고, 그에 따른 사용자 경험도 매끄럽지 않았다.
Single Page Application SPA
MPA의 단점을 극복하고자 등장한 것이 Single Page Application SPA이다. SPA는 HTML, CSS, JS를 최초 1회만 로딩하고 이후에는 JS를 통해 동적으로 화면(DOM)을 업데이트 하는 방식으로 작동한다. 페이지 전환시에 전체 페이지를 다시 로딩하지 않아도 된다는 점에서 속도가 증가하였고 서버 부하도 감소하였다.
SPA를 적용한 초기 프레임워크에는 Google의 Angular.js가 있다.
Angular는 양방향 데이터 바인딩을 지원하여 데이터가 변경되었을 때 DOM을 자동 업데이트 할 수 있게 하였다. 또한 모듈 단위로 앱을 구성하는 방식을 채택하여 구조화된 대규모 앱 작성이 가능하였다.
하지만 점점 앱의 사이즈가 커지면서 양방향 데이터 바인딩은 오히려 데이터의 흐름을 복잡하게 만들었고, 상태 변화가 많아지는 경우 디버깅이 어렵다는 단점이 있었다. 또한 DOM의 변경이 많을 수록 성능 저하가 발생하는 문제도 있었다.
⭐️ React!
앞서 살펴본 여러 문제점을 보완하고자 나온 것이 우리가 공부하고자 하는 React 이다.
React는 메타에서 개발한 오픈소스 자바스크립트 라이브러리로 2025년이 된 지금까지도 프론트엔드 개발의 대표적인 라이브러리로 자리매김하였다.
React의 특징을 살펴보며 어떻게 기존의 웹 애플리케이션의 단점을 극복할 수 있었는지 알아보자!
🤓 React의 특징
1. 컴포넌트 기반 아키텍처 🧩
페이지를 구성하는 모든 요소들을 컴포넌트라는 단위로 모듈화하여 개발하기 때문에 재사용성이 좋고 유지보수에 용이하다!
예를 들어, 여러 페이지에 동일하게 렌더링되는 header라는 부분이 있다면, 이를 하나의 독립된 컴포넌트로 작성하고 해당 컴포넌트를 필요로 하는 페이지에 불러오기만 하면 된다.
여러 페이지에서 사용된다고 해서 그 페이지들마다 따로 작성할 필요가 없기 때문에 중복 코드 발생을 막을 수 있다.
2. 단방향 데이터 흐름 (one-way data binding) 🔁
앞서 Angular.js의 특징 중 하나가 양방향 데이터 바인딩을 지원하는 것이라고 하였다.
이와 달리 react는 단방향 데이터 바인딩을 선택하여 부모 → 자식 컴포넌트, 또는 상태 → 화면(UI) 방향으로만 데이터가 흐르도록 만들었다. 이에 따라 사용자의 입력은 별도의 이벤트 핸들러를 통해 처리해야 하기 때문에 코드의 길이나 구현 방법이 조금 복잡해 질 수 있다.
하지만 데이터가 한 방향으로만 흐르기 때문에 데이터의 흐름을 예측하기 쉬워지고, 상태 추적과 유지 보수가 훨씬 용이해졌다. 웹의 크기가 커짐에 따라 데이터의 추적이 쉽다는 장점이 더욱 강력하게 작용하므로 단방향 바인딩을 채택한 것으로 보인다.
3. 선언형 UI 구성 🧪
웹에서 업데이트란 사용자의 행동 (클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것을 말한다. React에서는 상태(state) 기반 렌더링 방식을 사용하므로 컴포넌트의 state 값만 바꾸면 해당 값에 따른 UI가 렌더링 될 수 있다.
따라서 업데이트를 위한 복잡한 동작을 정의할 필요 없이 특정 변수의 값을 바꾸는 것만으로도 화면을 업데이트 시킬 수 있기 때문에 UI 코드가 훨씬 간결하고 직관적이다.
4. Virtual DOM 도입 🧠
React에서는 virtual DOM을 도입함으로써 렌더링 과정의 병목을 감소시키고 성능을 크게 향상시킬 수 있었기에 vitual DOM은 React의 가장 중요한 특징 중 하나로 꼽힌다.
virtual DOM을 이해하기 전에 DOM과 브라우저의 렌더링 과정을 먼저 살펴보자!
4.1 🌳 DOM Document Object Model
DOM이란 HTML 코드를 일종의 객체 모델로 표현한 것으로 문서의 구조화된 표현을 제공한다. HTML 문서가 브라우저에 로드되면 브라우저는 이를 파싱하여 자신이 이해할 수 있는 형태인 객체모델 = DOM을 구성한다. DOM은 HTML의 각 요소를 객체로 나타내고, 계층적인 구조를 가지고 있다.
(이미지 출처: https://docs.tosspayments.com/resources/glossary/dom)
이렇게 생성한 DOM을 통해 JavaScript와 같은 스크립트 및 프로그래밍 언어가 웹 페이지에 접근할 수 있게 된다. 즉 DOM은 웹 페이지와 프로그래밍 언어를 연결시켜주는 중간 역할이라고 생각할 수 있게 된다!
(이미지 출처: https://docs.tosspayments.com/resources/glossary/dom)
언어마다 HTML에 접근하는 코드는 다르지만 대표적으로 자바스크립트의 경우
document.getElementByld("#id") 으로 접근할 수 있다.
CSS도 HTML의 DOM과 유사하게 CSSOM (CSS Object Model)을 생성한다.
4.2 📄 웹 페이지의 렌더링 과정
우리가 작성한 코드는 아래와 같은 과정을 통해 화면에 렌더링 된다.
- HTML의 DOM, CSS의 CSSOM 생성
- Render Tree 생성
- Layout
- Painting
- Compositing
(1단계는 앞서 살펴본 DOM을 생성하는 과정이니 설명은 생략한다.)
2단계에서는 DOM과 CSSOM을 합쳐 Render Tree를 생성하게 된다. Render Tree란 화면에 렌더링 되어야 하는 모든 요소들의 정보를 포함하는 것으로 웹 페이지의 설계도 정도로 이해할 수 있겠다.
3단계는 Render Tree를 바탕으로 브라우저가 각 요소의 위치와 크기를 계산하는 단계이다. 각 요소가 화면의 어느 위치에 어떤 크기로 렌더링되어야 하는 지를 결정한다.
4단계는 각 요소의 스타일과 내용을 바탕으로 화면에 픽셀을 그리는 단계이다. 각 요소에 적용된 스타일 속성을 시각적으로 표현하여 픽셀 데이터를 생성한다.
5단계에서는 painting 과정에서 생성된 여러 개의 레이어를 하나의 화면으로 결합한다. 여러 요소들이 겹쳐져있는 경우, 그것들의 순서를 고려하여 정확한 화면을 렌더링 할 수 있게 만들어주는 과정이다.
이렇게 모든 단계를 거쳐 작성한 코드가 웹 브라우저 화면에 렌더링 되는 것인데, 이 단계들 중 layout, painting 단계는 매우 오래걸리는 무거운 작업이다.
만약 DOM을 수정하게 되면 1~5단계의 과정을 다시 거쳐야 하는데, DOM의 수정이 자주 발생하게 된다면 layout을 다시 하는 reflow와 painting을 다시하는 repaint 과정을 반복적으로 거쳐야 하므로 성능이 매우 저하된다.
이를 극복하기 위해 등장한 것이 virtual DOM이라는 개념이다!
4.3 🌐 virtual DOM
virtual DOM에 대한 이해를 돕는 영상자료이다.
https://youtu.be/BYbgopx44vo?si=aOC4U5vEm4J-IAC5
React에서는 렌더링이 발생될 상황에 놓이게 되면 새로운 화면에 들어갈 내용이 담긴 virtual DOM을 생성한다. virtual DOM은 실제 DOM의 가벼운 복사본으로 메모리 상에 존재하며, JavaScript 객체 형태이다.
React는 렌더링 이전의 virtual DOM과 렌더링 이후의 virtual DOM, 총 2개의 virtual DOM을 가지고 이를 비교하여 변경된 부분만 실제 DOM에 적용함으로서 불필요한 전체 DOM 업데이트를 방지해준다.
변경 사항을 메모리 상에 있는 virtual DOM을 통해 먼저 처리하고, 실제 DOM을 변경할 때는 최소한의 변경만 적용하므로 무거운 작업(layout, paiting)을 최소화할 수 있게 되었고 이를 통해 성능을 크게 향상시킬 수 있었다!
(이미지 출처: https://callmedevmomo.medium.com/virtual-dom-react-%ED%95%B5%EC%8B%AC%EC%A0%95%EB%A6%AC-bfbfcecc4fbb)
이렇듯 React는 단순히 새로운 UI 라이브러리가 아니라, 복잡한 웹 앱 개발에서의 데이터 흐름과 UI 성능 문제를 해결하기 위한 대안으로 등장한 기술이다. Angular.js가 보여준 SPA의 가능성에 예측 가능성과 성능을 더해 React는 대규모 웹 애플리케이션 개발의 새로운 표준으로 자리잡게 되었다.
React 이전의 방식들의 단점과 이를 보완하는 React의 특징을 살펴보니 왜 개발자들에게 많은 사랑을 받는 라이브러리가 될 수 있었는지 이해가 된다.
웹 개발을 한다고 하면 당연히 React를 배워야 한다고 하는데 왜 굳이 React 인지가 궁금하기도하고, 내가 지금 공부하는 것이 어떤 특징을 가지는지 정도는 아는 것이 좋을 것 같아 포스팅해보았다 😗
잘못된 내용이 있다면 언제든지 댓글 남겨주세요! 🙇🏻♀️
[참고자료]
https://docs.tosspayments.com/resources/glossary/dom
https://yozm.wishket.com/magazine/detail/2909/
