[React] React란? - React를 사용하는 이유

📌 들어가며...

이 글을 작성하는 시점(2024.04.21)인 지금까지 나는 다양한 프로젝트에서 프론트엔드 개발자로 참여하며, React를 많이 사용해왔다.

하지만 "왜 React 를 사용했는가?"에 대한 질문을 받는다면, 단지 많은 기업에서 사용하는 기술 또는 프론트엔드 개발자라면 당연히 알아야 할 기술이라는 답변밖에 떠오르지 않는다.

적어도 왜 이 기술을 사용하며 어떠한 장단점이 있는지 분석해 볼 필요가 있다고 생각했다.

따라서! 이 글을 통해 왜 리액트를 사용하며, 리액트의 등장 배경, 장단점 등에 정리하고자 한다!

---

📌 React란?

리액트(React)는 페이스북(현재 Meta)에서 만든 오픈 소스 JavaScript 라이브러리입니다. 

리액트는 사용자 인터페이스(UI) 개발에 초점을 맞춘 라이브러리로, UI 개발을 돕는 도구와 기능을 제공합니다.

Angular.js, Vue.js 와 더불어 프론트엔드 개발자 사이에서 아직까지 압도적인 인기를 갖고 있습니다. 

출처: npm trends: angualr vs next.js vs react vs vue

---

📌 React의 등장 배경

html, css, js 이미지

기본적으로 Web 개발을 위한 프론트엔드 기술로는 HTML, CSS, JavaScript 가 있습니다. 하지만, 프로젝트의 규모가 커짐에 따라 HTML, CSS, JavaScript 만으로는 개발하는 데에 한계가 생기게 됩니다.  (흔히 바닐라 자바스크립트라고 하죠)

 

웹을 개발한다는 것은 HTML, CSS를 작성하는 것 뿐만 아니라, JavaScript를 통해 동적으로 동작할 수 있게끔 하는 것을 의미합니다. 이때 "웹을 동적으로 제어한다" 라는 의미는 "DOM을 제어한다" 라는 의미가 됩니다.

이때 JavaScript 는 DOM API를 통해 DOM 을 직접 조작할 수 있습니다.

(예를 들어 document.querySelector 를 통해 HTML 요소를 찾을 수 있는 것도 DOM API 를 사용한 것이랍니다)

🤔 DOM (Document Object Model)
HTML 요소들을 트리 구조로 파싱하여 만든 객체

 

jQuery 이미지

하지만 html, css, javascript 만으로는 웹 개발이 복잡해짐에 따라 DOM 을 조작하는 것에도 한계가 생깁니다. 

(DOM 요소를 불러오고.. 추가하고.. 수정하고.. 삭제하고.. 무한반복)

 

이러한 DOM 조작을 쉽게 해주기 위해 jQuery 라이브러리가 등장하게 됩니다. 

jQuery 는 바닐라 JavaScript 보다 직관적으로 이해하기 쉬운 코드와 적은 양의 코드로 개발할 수 있기 때문에 많은 프론트엔드 개발자들에게 많이 사용되었습니다. 

// vanilla javascript
const h1 = documnet.querySelectorAll('h1');
h1.forEach((el) => el.style.color = 'red');

// jQuery
$('h1').css('color', 'red');

 

하지만 jQuery 역시 DOM 을 직접 조작해야한다는 한계에서는 벗어나지 못합니다.

웹 앱의 규모가 커지면서 사용자에 의한 동적인 DOM 조작이 자주 발생하는데, 이때 jQuery를 이용하면 브라우저의 성능이 낮아지는 문제가 발생합니다. 또한 모듈화나 컴포넌트화에는 적합하지 않아 유지보수 측면에서도 문제가 발생합니다. 

 

react, angluar, vue 이미지 (출처: https://dibtd.tistory.com/21)

 

이후 대규모 프로젝트에서 효율적으로 코드를 관리하고, 컴포넌트 기반 UI 개발을 지원하는 프론트엔드 프레임워크 및 라이브러리가 등장하게 됩니다. 

그중 가장 대표적인 3가지가 바로 React, Angular, Vue 인 것입니다. 이들을 사용하는 가장 큰 이유 중 하나는 UI 를 자동으로 업데이트해주기 때문에 빠르게 UI를 업데이트할 수 있다는 점입니다.

🤔 프레임워크 vs 라이브러리
프레임워크
- 개발을 위한 기본 구조와 규칙을 제공하는 도구
- 앱의 흐름과 제어를 관리하며, 필요한 기능과 도구를 제공
- ex) Spring Framework, Angular, Vue 

라이브러리
- 개발을 위해 재사용 가능한 코드의 집합. 특정 기능을 수행하는 함수, 클래스, 모듈 등으로 구성됨
- 프레임워크와 달리 개발자가 코드의 흐름과 제어를 직접 관리
- ex) jQuery, React, Express

---

📌 React를 사용하는 이유

✅ 자바스크립트 기반, JSX 지원

Angular 와 Vue 는 자신만의 문법을 갖고 있지만,

React 는 자바스크립트 기반의 문법을 사용하기 때문에 자바스크립트에 익숙하다면 쉽게 사용이 가능합니다. 

 

또한 JSX(Javascript Syntax eXtension) 문법을 지원합니다. JSX는 JavaScript를 확장한 문법으로, 브라우저에서 실행하기 전에 babel을 사용하여 일반 JavaScript 형태의 코드로 변환됩니다. 

JSX 는 하나의 파일 안에서 js와 html을 동시에 작성하여 편리하며, 가독성이 높습니다. 또한 JSX 내부에서 자바스크립트 표현식을 사용할 수 있어 편리합니다. 

function App() {
	const name = 'John';
	return (
		<div>
			<div>Hello</div>
			<div>{name}!</div>
		</div>
	);
}

 

 

✅ Virtual DOM

React는 리렌더링 시, 화면의 깜빡임 없이 빠른 속도로 UI를 변경 시키는데 그 이유가 바로 Virtual DOM 을 이용하기 때문입니다. 

🤔 React 리렌더링 조건
- props 가 변경되었을 때
- state 가 변경되었을 때
- 부모 컴포넌트가 렌더링되었을 때
- forceUpdate() 실행했을 때

 

Virtual DOM은 실제 DOM과 같은 내용을 담고 있는 복사본으로, 실제 DOM이 아닌 자바스크립트 객체 형태로 메모리 안에 저장되어 있습니다. 

따라서 실제 DOM 대신, Virtual DOM에 접근하고 수정함으로써 매우 가볍고 빠르게 작업을 수행할 수 있게 됩니다. (대신, 메모리 사용량 증가라는 단점이 있기도 합니다)

 

만약 실제 DOM 에서 폰트 색상을 변경한다고 가정하면 어떠한 일이 일어날까요? 1. 먼저 브라우저는 DOM에서 해당 요소를 검색합니다. 2. 그 다음 해당 요소와 자식 요소들을 DOM에서 제거하여 3. 새롭게 수정된 요소들로 이를 교체합니다. 4. CSS는 이 과정 이후 다시 계산이 되며 5. 새롭게 계산된 내용이 브라우저에 그려지게 됩니다.

이는 대규모 웹 애플리케이션에 충분히 무거워질 수 있는 작업이 되겠죠?

 

리액트의 Virtual DOM 은 항상 2개의 가상돔 객체를 가지고 있습니다. 렌더링 이전 가상돔과 렌더링 이후 가상돔을 비교하여 차이가 발생한 부분만을 실제 DOM에 적용하게 되는데 이러한 과정을 Reconciliation(재조정)이라고 합니다.

(Virtual DOM 동작 원리는 추후에 포스팅 하겠습니다)

 

따라서 리액트는 Virtual DOM을 통해 바뀐 내용만 반영하여 불필요한 렌더링을 피할 수 있습니다. 

 

✅ 활발하고 다양한 커뮤니티와 생태계

리액트는 활발하고 다양한 커뮤니티와 생태계를 가지고 있습니다.

이를 통해 문제 해결을 위한 자료와 정보를 쉽게 얻을 수 있으며, 다양한 라이브러리와 도구를 활용하여 개발 생산성을 높일 수 있습니다.

 

✅ 컴포넌트 기반

리액트는 컴포넌트 기반으로, 효율적인 코드의 분리가 가능합니다.

컴포넌트는 레고 블록과 같이 작은 단위로 개발하는 것을 의미하며, 가독성이 높고 간단하여 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있습니다. 

또한 특정 기능 및 화면을 구현할 때 해당 일에만 집중할 수 있도록 도와줍니다. 

---

📌 React 의 특징

✅ 가상 돔(Virtual DOM)

앞서 언급했듯이, 리액트는 브라우저가 관리하는 실제 DOM이 아닌, Virtual DOM을 사용하여 UI 업데이트를 처리합니다. 

렌더링 이전 가상 돔과 렌더링 이후 가상 돔을 비교하여 Reconciliation(재조정) 과정을 통해 최소한의 DOM 조작으로 신속한 UI 업데이트와 성능 최적화를 가능하게 합니다. 

 

✅ 컴포넌트 기반 아키텍처

리액트는 컴포넌트 기반 아키텍처를 채택하고 있습니다. 컴포넌트 기반 아키텍처란, 특정 기능을 수행하는 독립적인 단위인 컴포넌트를 이용해서 마치 작은 레고 블록으로 거대한 집을 만들 듯이 만들어 가는 구조를 의미합니다. 

컴포넌트를 나눌때 한 컴포넌트는 한 가지 일만 수행한다는 단일 책임 원칙을 따릅니다. 캡슐화된 컴포넌트가 스스로 상태를 관리하고 복잡한 UI도 효과적으로 구성할 수 있습니다. 

 

✅ 단방향 데이터 흐름

리액트는 데이터의 흐름을 단방향으로 유지합니다. 자식 컴포넌트는 부모 컴포넌트로부터 props 를 통해 데이터를 전달 받을 수 있습니다.

리액트는 애플리케이션의 상태를 예측하고 디버깅하기 쉽게 만들기 위해 단방향 데이터 바인딩을 합니다. 

(참고로 Vue와 Angular는 양방향 데이터 바인딩을 합니다)

 

✅ 다른 라이브러리와의 높은 호환성

리액트는 주로 다른 라이브러리나 프레임워크와 함께 사용됩니다. 예를 들어 페이지 간 전환을 관리하기 위한 리액트 라우터(React Router), 상태 관리를 위한 Redux 또는 MobX과 같은 라이브러리를 함께 사용할 수 있습니다.

 

---

 

📌 React 장단점

✅ 장점

• 가상 DOM을 사용하여 리렌더링 성능 최적화
• 컴포넌트 기반 아키텍처를 통해 재사용성과 유지보수성 향상
• 단방향 데이터 바인딩을 통한 안정성 보장
• React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접할 수 있음

✅ 단점

• 앱의 규모가 커지면 속도가 느려짐
• VIEW 이외의 기능은 써드파티 라이브러리를 이용하거나 직접 구현해야함
• 데이터 모델링, 라우팅, Ajax 등의 기능을 지원하지 않음
• IE8 이하는 지원하지 않음

---

 

📚 참고

https://www.elancer.co.kr/blog/view?seq=167

https://velog.io/@juno7803/React%EA%B0%80-%ED%83%9C%EC%96%B4%EB%82%9C-%EB%B0%B0%EA%B2%BD