React - 왜 React를 사용하는가?

React란?

 
React는 오늘날 가장 유명한 JavaScript 라이브러리 중 하나입니다. 공개된 이후 수년이 지난 지금도 웹 개발자들이 사용 중이고 view를 유지하고 만들기에 가장 좋은 JavaScript UI 라이브러리입니다.
 
React를 이렇게 유명하게 만든 주요한 특징은 바로 React의 JSX와 Virtual DOM입니다.
 
JSX는 JavaScript eXtension의 축약어로 자바스크립트 구문의 확장판입니다. JSX는 HTML구문과 JavaScript를 혼합하여 개발자가 브라우저에 쉽게 접근할 수 있게 만들었습니다.
 
Virtual DOM은 웹 브라우저가 생성한 DOM tree의 가상 복사본으로 실시간으로 일어나는 업데이트를 기록하기 위해 React에서 생성합니다.
 

React js를 사용하는 8가지 이유

 

1. Angular에 비해 배우기 쉽다

 
React는 웹 페이지의 view layer만 다루는 기초적이고 가벼운 라이브러리입니다. 자바스크립트로 코딩을 한다면  비슷한 짝인 Angular 보다 투입 시간 대비 학습량이 높아(배우기 쉬워) 시작하기 좋은 라이브러리입니다.
 
프로그래밍과 HTML-CSS 기능적인 이해가 있다면 빠르게 React를 사용할 수 있습니다. 다른 프레임워크 혹은 라이브러리를 이용하다 넘어오는 경우에는 React의 혁신적인 방법들에 적응하는데 시간이 걸립니다.
 
그 외로, React에는 사용하기 어려운 유틸리티나 개념은 없습니다. ReactJS와 관련된 모든것에 대해 도움을 줄 수 있는 방대한 문서들이 온라인에 존재합니다.
 
 

2. React는 거대한 커뮤니티가 있다.

 
탑 5 깃허브 저장소중 하나가 React이고 정기적으로 해결책과 툴을 개발하는 자바스크립트 개발자들로부터 방대한 팔로잉을 받았습니다.유저로부터 개발된 많은 앱들이 공식 라이브러리에 포함되어 있습니다. 어떤 문제든 거대한 커뮤니티로부터 도움을 받을 수 있고, 커뮤니티는 새로운 소식을 받기 위한 좋은 방법입니다. 2022년 1월, 리액트는 깃허브에서 180,000개 이상의 별을 받았고 1주일에 약 10,000,000회의 npm 다운로드를 합니다.
 
 

3. React는 재사용 가능한 컴포넌트를 제공한다.

 
ReactJS에서 컴포넌트는 독립적이고, 재사용 가능한 코드입니다. Props로 데이터를 입력하면 컴포넌트는 렌더링 된 HTML 요소를 반환합니다. 자바스크립트 함수 혹은 클래스 컴포넌트로 사용 가능하며, 클래스 컴포넌트는 render 메서드를 활용하는 자바스크립트 클래스입니다.
 
만든 React 컴포넌트는 앱의 다른 부분에서 재사용하거나 wrapper 컴포넌트를 개발하여 구조를 만들어 재사용성을 높일 수 있습니다. 개발한 컴포넌트로 계속 wrapper 컴포넌트를 개발하다 보면 결국 본인 앱인 root 컴포넌트를 반환받습니다. 일반적으로, 재사용한 컴포넌트와 연관된 시스템 업그레이드는 다른 컴포넌트의 작업에 영향을 끼쳐 많은 오류를 발생하게 합니다. 하지만 React에서는 모든 컴포넌트가 독립적으로 존재하여 업데이트가 가해져도 다른 컴포넌트의 작업에는 영향이 없어 업데이트를 관리하는 것이 쉽습니다.
 
 

4. Virtual DOMS

 
DOM이란 HTML과 XML을 파싱 하여 트리 구조로 표현하는 인터페이스입니다.
 
웹 브라우저는 출력물을 렌더링 하기 위해 DOM 모델을 생성하고 HTML 코드 내부의 각각의 객체와 요소를 DOM 트리안의 노드처럼  대합니다.
 
사용자 입력 또는 데이터 변경으로 인해 HTML 코드에 변경이 생기면 DOM 트리는 많은 시간과 자원이 소모되는 렌더링을 다시 해야 합니다. ReactJS는 이 문제를 Virtual DOM으로 해결합니다.
 
React는 간단히 DOM의 사본을 생성하고 캐시 메모리의 한 종류를 유지합니다. 변경이 일어날 때마다 React는 Virtual DOM을 검사하여 어떤 트리 노드 혹은 어느 컴포넌트가 업데이트되어야 하는지 찾습니다.

DOM의 일부만 조금 변경하는 방식으로 빠르고 효율적인 업데이트가 가능해져 개발자의 시간을 많이 절약시켜주고 앱의 속도를 비약적으로 상승시킵니다.
 
 

5. JSX는 ReactJS의 퍼포먼스와 효율성을 증가시킵니다

 
JSX (JavaScript XML)는 자바스크립 확장 문법입니다. HTML 구조의 기능을 자바스크립트로 확장시키기 위해 페이스북에서 개발하였습니다. JSX를 이용하면 HTML과 JS 코드를 따로 분리할 필요가 없어집니다. 
 
ReactJS를 이용해 자바스크립트 코드 내부에서 선언형 HTML 구문을 사용할 수 있습니다.
 
브라우저들은 UI를 표시하기 위해 HTML 문서들을 디코딩합니다. 브라우저들을 디코딩을 DOM tree들을 생성하여 수행하는데
 
자바스크립트는 상호작용 가능한 UI를 개발할 수 있도록 생성한 DOM tree를 직접적으로 수정할 수 있게 해 줍니다. JSX는 매니폴드를 통해 DOM 수정의 효율성을 높입니다.
 
개발자들은 HTML과 ReactJS 요소들을 브라우저의 트리 구조에 전달하여 깔끔하고 유지보수가 편한 코드를 작성할 수 있습니다.
 
JSX는 Virtual DOM과 함께 ReactJS 앱들의 퍼포먼스와 효율성을 증가시킵니다.
 
JSX는 다른 프레임워크와 라이브러리에서도 사용 가능합니다.
  
 

6. 단방향 데이터 흐름으로 효율적인 디버깅과 에러 찾기

 
리액트에서 부모 컴포넌트로부터 상속받은 데이터를 Props라고 부릅니다. Props는 불변 객체로 React의 단방향 데이터 흐름에 따라서 자식 컴포넌트에 의해 수정될 수 없습니다.

위에서 아래로 향하는 고정된 데이터 흐름은 어떤 자식 컴포넌트의 변화도 부모 컴포넌트 혹은 같은 부모를 가진 컴포넌트에 영향을 주지 않아 코드를 안정적이고 일관성 있게 만듭니다.

이 불변 객체를 바꾸고 싶다면 state를 업데이트해야 합니다. ReactJS는 데이터 일관성을 유지하기 위해 자동으로 세부적인 디테일을 변경합니다.
 
React의 단방향 데이터 흐름 덕분에 컴포넌트의 데이터 접근을 강하게 통제할 수 있어 디버깅과 에러 찾기는 매우 효율적입니다.
 
하지만 다양한 컴포넌트가 접근하고 수정할 가능성이 있는 중요한 데이터는 부모 컴포넌트 내부에 Props로 선언해두어야 원치 않는 접근 문제를 해결할 수 있습니다.

 

7. Redux가 모든 컴포넌트의 데이터 일관성을 유지해준다

 
Redux란 React의 state 관리 능력을 확장하기 위한 자바스크립트 라이브러리입니다.

Redux는 모든 컴포넌트들이 사용 가능한 유일 공식 데이터 저장소로 생각할 수 있습니다. 모든 컴포넌트들의 데이터 일관성을 유지해주고 View를 업데이트된 상태로 유지시킵니다.
 
Redux에는 모든 앱 데이터가 저장된 중앙 저장소가 있습니다. 컴포넌트가 action을 실행하면 redux는 state 변경을 위한 메시지를 전달받고 redux는 reducer를 이용해 저장소에 저장된 state를 변경한 뒤, 연결된 모든 컴포넌트에 변경사항을 전파합니다.
 
Redux는 state 업데이트를 위해 데이터를 상속받은 props로 자식 컴포넌트에게 전달하고 전달하고 또 전달하는 불편한 방식을 피합니다. Redux를 통해 모든 컴포넌트는 필요한 데이터를 중앙 저장소에 직접 접근하여 얻을 수 있습니다. 
 
 

8. React hook

 
React Hook이 Redux를 대체할 것인지 말 것인지에 대한 많은 토론이 있었지만 답은 '아니오'입니다. React Hook은 ReactJS 16.8에 소개된 독립적인 특징으로 자바스크립트 개발자들이 state와 다른 특징들을 함수형 컴포넌트에서 사용 가능하도록 해줍니다.

 

더 이상 복잡한 클래스를 사용할 필요 없이 Hook을 이용하여 컴포넌트 간에 state 로직을 관리하고 비슷한 로직을 한 개의 컴포넌트에 함께 배치하고 props와 클래스 없이 컴포넌트 간 데이터 교환이 가능합니다.
 
Redux와 Hook은 React의 서로 다른 문제를 최적화하기 위해 사용됩니다. react-redux hooks API와 React의 UseReducer 훅은 두 가지를 동시에 사용 가능하게 합니다.
 
 

요약

1. Angular에 비해 배우기 쉽다
2. 거대한 커뮤니티가 존재한다
3. 재사용 가능한 컴포넌트를 지원한다
4. Virtual DOM
5. JSX
6. 단방향 데이터 흐름으로 인한 간편한 오류 찾기와 디버깅
7. Redux
8. React Hooks

 
 
출처 
https://www.monocubed.com/blog/why-use-react/

Top 8 Reasons Why Use React For Web Development in 2022