[React] 리액트란? (리액트의 특징, 등장 배경)

현지렁이·2023년 4월 2일

1. 리액트란?

리액트는 페이스북이 만든 사용자 인터페이스(UI) 개발을 위한 라이브러리이다.
UI 컴포넌트를 만들어 캡슐화를 시켜주기 때문에 재사용성이 높고 한가지 작업만 하기 때문에 단순하고, 다양한 자바스크립트 프레임워크나 라이브러리와 함께 사용도 가능하다.

더욱 동적이고 복잡해진 웹 페이지

이 때, `SPA(Single Page Application)`가 등장하게 되었다
SPA는 HTML, CSS, Javascript 파일을 최초 1회만 로드하고, 이후에는 자바스크립트 파일을 통해 DOM 또는 필요한 HTML 파일을 조작하는 방식을 말한다.
이는 서버로부터 완전한 새로운 페이지를 불러오지 않고, jsp파일 없이 index.html파일 하나에서 js, css등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념이다.
자세히 이 때 `SPA(Single Page Application)`가 등장하게 되는데 SPA는 HTML, CSS, Javascript 파일을 최초 1회만 로드하고, 이후에는 자바스크립트 파일을 통해 DOM 또는 필요한 HTML 파일을 조작하는 방식을 말한다. 이는 서버로부터 완전한 새로운 페이지를 불러오지 않고, jsp파일 없이 index.html파일 하나에서 js, css등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념이다. 이처럼 웹의 발전과 함께 SPA 개발을 위한 ES6, Node.js와 npm 그리고 webpack, Babel과 Angular, React, Vue와 같은 프론트 라이브러리, 프레임워크가 등장하게 되었다.

Virtual DOM 은 가상의 DOM으로, 브라우저에 실제로 보여지는 DOM 이 아니라 그냥 메모리에 가상으로 존재하는 DOM 으로서 그냥 JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것보다 속도가 훨씬 빠르다.
리액트는 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링한다. 그리고 diffing 알고리즘을 통해 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시켜 준다.

UI를 선언적으로 나타낼 수 있다.
사용자 인터페이스를 만들때 쉽고 간결하게 해준다.
애플리케이션 안에서 각각 상태에 따른 디자인 뷰와 연결된 데이터가 변경되면, 이에 맞는 컴포넌트들을 올바르게 랜더링해 화면 구성을 해준다. 이처럼 선언형의 화면뷰는 예측 가능한 코드 및 쉬운 디버깅을 하게 해준다.
과정이 하나하나 드러나는 명령형이 아니라, 목적과 결과에 치중한 선언형 프로그래밍을 가능하게 한다.

독립적인 state 기반 유연한 컴포넌트
요소라고 하는 컴포넌트 별로 나누어 개발이 가능하다. 또 이렇게 개발한 것을 다른 곳에 활용할 수도 있다.
또 자바스크립트와 JSX를 조금 사용할 줄 안다면 간단하게 구현이 가능한데 이 때문에 개발을 쉽게 하고 유지보수를 하는데도 큰 장점이다.
- (*JSX란? 리액트로 HTML을 개발하는 방법, 매우 간단하며 쉽다.)

데이터가 UI로 흐르는 구조이며, 데이터가 변했을때 UI가 업데이트 된다.
하지만 단방향이므로, UI쪽에서 데이터를 변화시키는 것은 불가능하다. 즉 데이터가 변하게 되면 UI는 변화된 새로운 데이터와 함께 업데이트 된다.
데이터를 관리하는 컴포넌트가 있고 데이터를 UI컴포넌트에 전달하는 단순한 데이터 흐름으로 이해해 쉽고 편리하게 구현 가능하다.