[React] React란?

(1) 리액트(React)란?

리액트가 뭘까?

React는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다.

 

Meta(구 Facebook)에서 개발한 라이브러리로,

현재 많이 개발되고 있는 앱/웹의 View를 개발할 수 있는 인기 라이브러리이다.

 

그러면 왜 자바스크립트 라이브러리가 React라고 명명이 된 것일까?

React의 사전적 의미

 

React는 말 그대로 '반응하다'라는 의미이다.

리액트는 사용자 인터페이스(UI)의 변화를 반응적으로 처리한다는 특징을 가진다.

그렇기에 반응적 특성에 따라 "React"란 이름을 선택한 것이다.

 

기본적으로 데이터의 변화를 감지하여

UI를 자동으로 업데이트하는 방식으로 작동한다.

 

즉, 사용자의 입력이나 데이터 변경에 반응하여 화면을 동적으로 업데이트하는 것이다.

 

리액트 개발은 그 당시

웹 개발에서 UI의 변경을 수동으로 처리하던 방식에서 벗어나,

자동으로 반영하는 방식을 도입한 것이다.

 

---

(2) React의 필요성

React는 기본적으로 사용자의 입력이나 데이터의 변경에 반응하여

화면을 동적으로 업데이트하는 방식으로 작동한다.

 

즉, 리액트 개발 이전에는

웹 개발에서 UI의 변경을 수동으로 처리하기 위해

JavaScript 또는 JQuery와 같은 라이브러리를 이용하여 *DOM을 직접 조작하였다.

DOM 조작이 많아질수록 코드가 복잡해지고 유지보수가 어려워진다.

이에 따른 성능 문제도 덤.

 

하지만 리액트는 *가상 DOM을 사용하면 변경된 부분만 효율적으로 업데이트한다.

가상 DOM은 DOM 조작의 부담은 줄이고,

성능을 최적화하여 코드의 복잡성을 줄여준다.

 

*DOM: Document Object Model(문서 객체 모델)의 약자로, HTML 문서를 브라우저가 이해할 수 있도록 Tree 구조의 표현과 조작을 위한 인터페이스이다.

*가상 DOM: 리액트와 같은 라이브러리에서 사용하는 DOM의 가벼운 사본이다. 브라우저의 실제 DOM과 달리, 메모리 내에서 효율적으로 업데이트 및 렌더링 작업을 수행할 때 사용한다.

 

 

---

(3) React의 특징

• 컴포넌트 기반 구조
  • UI를 독립적인 컴포넌트 단위로 나누어 개발
  • 컴포넌트 사용으로 인한 코드의 재사용성 ↑
  • 코드의 유지보수와 관리에 용이
• 가상 DOM
  
  • 전체 DOM을 렌더링할 필요 없이, 가상 DOM으로 변경 사항을 찾아내어 최소한의 업데이트만 실제 DOM에 적용
  • 브라우저에서 연산되는 실제 DOM과 달리, 가상 DOM은 메모리 내에서 연산되어 효율적
  • 성능 향상 및 실제 DOM 조작의 부하 ↓
• 단방향 데이터 흐름
  • 단방향 데이터 바인딩으로 성능 저하 없는 DOM 렌더링
  • 데이터의 흐름이 예측 가능하게 유지됨
  • 데이터의 변경을 컴포넌트 트리를 통해 일관된 방식으로 전달
  • 양방향 바인딩은 데이터의 변경과 UI 요소의 상태 변경이 서로 영향을 주기에 복잡하고 성능 저하
• JSX 문법
  • JSX(JavaScript XML)이라는 확장 문법 사용
  • JS 코드 내에서 HTML과 비슷한 구문 작성 가능
  • 코드의 가독성 ↑
  • 컴포넌트 구조를 직관적으로 파악 가능
• 상태 관리
  • 동적인 데이터를 관리하고 업데이트하는 방식
  • 상태(State) 변화를 기반으로 컴포넌트를 자동으로 렌더링

---

(4) React의 장단점

• 장점
  • DOM 조작의 복잡성 감소
  • 재사용 가능한 컴포넌트 기반 개발
  • 데이터의 일관된 흐름
  • 더 나은 유지보수성과 확장성
  • 다양한 라이브러리 지원
• 단점
  • IE 8 이하 버전은 지원하지 않음
  • 초기 로딩 시간이 길어질 수 있음
  • 기존에 개발된 코드들과의 호환성
  • 메모리를 많이 차지 

 

단점을 찾다보니 리액트를 사용하지 않는다는 개발자들도 있는 것 같다.

결론적으로 말하면 쌩 자바스크립트로 HTML이 커지는 게 대응 가능해서라고 한다.

물론 리액트에 대해 완벽히 대체 가능하다는 것은 아니다.

여러 요인을 고려했을 때, 굳이 리액트를 사용하지 않고

자바 스크립트로 대체 가능한 수준이면 자바 스크립트를 사용하는 것 같다.

---

🍉 참고

• [HTML] DOM이란 무엇일까?
• https://youtu.be/RtvSgptpfnY?si=HyJWIdVshEtkyDae