[TIL] React의 특징

프로젝트에서 리액트를 많이 사용해왔지만 복습 겸 놓친 부분이 있는지 확인하기 위해 리액트 강의를 듣고 정리하고자 한다.

 

React는?

리액트는 Meta에서 발표한 오픈소스 JavaScript 프레임워크다.

 

대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술이다.

 

React의 기술적인 특징

컴포넌트를 기반으로 UI를 표현한다.

리액트에서는 기본적으로 페이지의 모든 요소들을 컴포넌트 단위로 모듈화해서 개발하기 때문에 여러 페이지에서 공통적으로 사용되는 요소가 필요할 때 하나의 컴포넌트를 만들고 그 컴포넌트를 여러 페이지에서 불러와서 사용하면 된다.

 

수정사항이 발생하더라도 해당 컴포넌트 하나만 수정하면 되기 때문에 유지보수에 굉장히 용이하다.

 

화면 업데이트 구현이 쉽다.

리액트가 채택한 선언형 프로그래밍 방식은 원하는 목적만 명시하면 되기 때문에 코드가 비교적 간결하다. 반면에 명령형 프로그래밍 방식은 목적을 이루기 위한 모든 과정을 다 설명하기 때문에 코드가 비교적 길고 복잡하다.

 

리액트에서는 페이지를 컴포넌트 단위로 나눠서 개발하게 되는데 각각의 컴포넌트에는 state라는 현재의 이 컴포넌트의 상태를 저장하는 특수한 변수를 저장할 수 있다. state의 값이 변경되면 변경된 state 값에 따라서 각각 다른 UI가 렌더링되도록 설정할 수 있다.

 

 

화면 업데이트가 빠르게 처리된다.

리액트는 동시에 발생한 업데이트들을 모아서 DOM 수정 횟수를 최소화하는 작업을 자동으로 처리해준다.

 

 

그것이 가능한 이유는 내부적으로 Virtual DOM이라는 가상 DOM을 이용하고 있기 때문이다.

 

Virtual DOM이란?

Virtual DOM은 UI의 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이다. 즉, 실제 브라우저가 렌더링하는 DOM을 JS 객체로 복제해 놓은 것이다.

 

리액트는 업데이트가 발생하면 실제 DOM을 수정하기 전에 Virtual DOM에 업데이트들을 순서대로 반영해본다. 그리고 나서 동시에 발생한 업데이트들이 다 모였으면 모인 업데이트들을 한 번에 실제 DOM에 반영을 한다.

 

동시에 아무리 많은 수의 업데이트가 발생한다고 하더라도 Virtual Dom에 한 번 다 모였다가 반영되는 것이기 때문에 최소한의 횟수로 DOM이 수정되고 결론적으로 좋은 업데이트 성능을 보장해준다.