React란?

탑신병자 듀오 팀 티모입니다.

오늘은 React에 대해서 알아보겠습니다.

---

React는 사용자 인터페이스(UI)를 구축하기 위한 프론트엔드 자바스크립트 라이브러리입니다.

Meta(前 Facebook)가 복잡한 UI와 컴포넌트 구성을 개선해 보다 빠른 랜더링 등의 성능 향상을 위해 만들었습니다.

싱글 페이지나 모바일 애플리케이션 개발에 많이 사용됩니다.

 

웹 개발이 점점 복잡해짐에 따라 기존에 사용되던 html, css, js의 한계를 극복하기 위해

jQuery 라이브러리를 사용해 DOM(Document Object Model)을 조작하였습니다.

 

• DOM : 문서 객체 모델
  웹 페이지 문서를 트리 구조의 노드로 표현하며, 자바스크립트로 이 노드들을 조작함
  웹 페이지의 각 요소들을 동적으로 접근 및 수정할 수 있음

이후 직접 DOM을 조작하는 방식 역시 대규모 프로젝트를 효율적으로 관리하기 위해 개선이 필요했고,

그 결과로 컴포넌트 기반으로 지원하는 프론트엔드 프레임워크(혹은 라이브러리)가 생겨나게 되었습니다.

대표적으로는 React, Angular, Vue가 있습니다.

 

vs Angular, Vue

https://npmtrends.com

프론트엔드 개발용 3대장은 React, Angular, Vue지만, 그 중에서도 React는 압도적인 인기를 누리고 있습니다.

npm package 다운로드 수를 비교해주는 npmtrend에서 최근 5년을 검색한 결과,

2022년 말을 제외하고는 React는 전세계 사용자들에게 가장 많이 선택된다는 것을 알 수 있었습니다.

 

이들 간에는 프레임워크(Angular, Vue)와 라이브러리(React)라는 차이점이 존재합니다.

프레임워크는 개발에 필요한 기본적인 기능 및 도구 등을 제공합니다.
따라서 개발자는 프레임워크가 제공하는 틀에 맞춰 코드를 작성해야 합니다.

반면 라이브러리는 특정 기능을 수행하는 함수, 클래스, 모듈 등을 재사용 가능하도록 구성한 코드의 집합입니다.

개발자는 필요한 기능만 호출해 사용하므로 애플리케이션의 구조를 자유롭게 결정할 수 있습니다.

따라서 가볍고 유연한 웹 개발을 목적으로 하기에는 라이브러리가 더 적합합니다.

 

그 외에도, 페이스북에서 유지보수 및 지원이 이루어지며, 다양한 자료들이 활발하게 오가는 장점도 있습니다.

또한 기술 확장으로(React Native) 안드로이드, iOS의 모바일 앱을 만들 때에도 활용할 수 있다는 점 역시 점유율에 영향을 미쳤습니다.

 

React의 특징

React의 특징이자 장점은 여러 가지가 있습니다.

1. Virtual DOM :
   React가 웹 화면을 업데이트하는 과정을 효율적으로 수행하기 위한 기술입니다.
   실제 DOM을 반복적으로 업데이트하면 그만큼 웹 브라우저가 랜더링을 자주 하게 되어 부하를 줄 수 있습니다.
   React는 최초 인 메모리 캐시를 생성한 뒤 이후의 요청과 차이를 계산해 웹 브라우저의 DOM을 업데이트합니다.
   이를 통해 개발자가 UI 업데이트를 하더라도 사용자는 웹 브라우저를 보다 빠르게 이용할 수 있습니다.
2. 단뱡향 데이터 흐름 :
   양방향으로 데이터를 전달하는 Angular, Vue와 달리 React는 단방향으로 데이터를 전달합니다.
   따라서 UI가 복잡해져도 성능 저하를 최소화해 DOM을 랜더링합니다.
3. 컴포넌트 기반 :
   특정 기능을 수행하는 컴포넌트 단위로 UI 구성합니다.
   따라서 코드의 재활용성 및 유지보수, 웹 페이지 구성 파악 등에 용이합니다.
4. 호환성 :
   React는 단독으로 사용 가능하지만, 주로 다른 라이브러리나 프레임워크와 함께 사용합니다.
   애플리케이션을 개발 시 여러 페이지 간 전환을 관리할 때는 React Router를 사용하며,
   상태(state) 관리를 위해서는 Redux나 MobX 등의 라이브러리를 함께 사용하기도 합니다.
5. JSX(JavaScript Syntax Extension) 문법 :
   자바스크립트와 XML을 조합한 JSX 문법을 사용하며, 컴포넌트의 구조와 동작을 선언적으로 작성하게 해줍니다.
   따라서 코드를 현저히 줄일 수 있으며 보다 직관적으로 이해할 수 있도록 해줍니다.

• 선언적 vs 절차적(명령형)
  선언적 방식은 What을 중심으로 코드를 작성합니다.
  무엇을 하면 무엇이 되는지를 작성하면 되며, 그것을 동작시켜 구현해내는 것은 신경 쓸 필요가 없습니다.
  절차적 방식은 How를 중심으로 코드를 작성합니다.
  결과를 얻기 위해 어떠한 과정을 거쳐야 하는지 작성하는 것이며,
  원하는 결과가 나오지 않으면 과정을 일일이 체크해 수정해야 하므로 코드가 길어질수록 유지보수가 어려워집니다.

---

지금까지 React에 대해 간단히 알아보았습니다.

감사합니다.