[React] React 정의 및 기술적 특징

리액트란?

 

리액트는 페이스북(현 메타)이 개발한 프론트엔드를 위한 오픈소스 자바스크립트 라이브러리이다.

우리는 리액트를 사용해서 복잡한 대규모 웹서비스의 UI를 좀 더 편하고 빠르게 개발할 수 있다.

 

리액트는 제공하는 기능이 매우 강력하기 때문에 넷플릭스, 페이스북, 인스타그램, 노션등의 오늘날 여러 대규모 서비스들을 지탱하는 기술로 활발히 사용되고 있다. 

 

리액트의 기술적 특징

 

리액트는 아래와 같은 기술적인 특징을 갖는다. 

 

각 특징에 대해 더 자세하게 알아보자.

 

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

 

컴포넌트(Component)란 우리말로 "구성요소"로, 화면을 구성하는 요소/ UI를 구성하는 요소를 말한다.

 

예를 들어 우리가 구현해야 하는 웹페이지가 헤더, 메인, 푸터 세 가지 부분으로 나눠져 있다고 하면,  리액트에서는 이 각각의 영역을 분리해서 헤더는 header.js, 메인은 main.js, 푸터는 footer.js라는 각각의 자바스크립트 파일에 component라는 단위로 나눈 뒤 모듈화해 보관할 수 있다.

 

화면의 구성요소인 컴포넌트 모듈화한다는 것은, 중복 코드를 제거할 수 있다는 관점에 매우 큰 장점이 된다.

 

만약에 공통된 header를 갖는 비슷한 두 페이지를 개발한다고 할 때, 컴포넌트를 사용하지 않는다면, 공통으로 쓰이는 요소들을 구현할 때마다 매번 같은 코드를 마크업해 한다. 

 

이런 방식으로 작업을 하게 되면 중복 코드가 발생하게 되고, 가벼운 수정사항에 대해서도 변경할 부분이 많아지게 된다. 페이지가 늘어남에 따라 코드 수정 및 유지보수는 더욱 더 어려워지게 된다.

 

 

그러나! 리액트를 이용하면 이러한 문제는 겪지 않아도 된다!

리액트는 기본적으로 페이지의 모든 요소들을 컴포넌트라는 단위로 모듈화 해서 개발하기 때문에, 여러 페이지에서 공통으로 사용되는 요소가 필요할 때 그냥 헤더 컴포넌트를 만든 뒤 이 컴포넌트를 여러 페이지에서 불러와서 사용하도록 코드를 작성할 수 있다. 따라서 중복 코드가 발생하지 않아 유지보수가 쉬워지게 된다.

 

 

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

 

업데이트란 버튼을 클릭했을 때 버튼의 모양이 변하는 것처럼, 사용자의 행동에 따라서 웹페이지가 스스로 모습을 바꿔 상호작용 하는 모든 기능을 말한다. 

업데이트 예시

 

리액트에서는 선언형 프로그래밍이라는 방식으로 동작하기 때문에, 이 화면 업데이트를 구현하기 쉽다.

선언형 프로그램이란, 불필요한 과정은 생략하고 목적만 간결히 명시하는 방법을 말한다.

 

선언형 프로그래밍의 반대말은 명령형 프로그램으로, 명령형 프로그래밍은 목적을 이루기 위한 일련의 모든 과정을 하나하나 다 설명하는 방식을 말한다.

 

리액트를 사용하지 않고 자바스크립트로만 업데이트를 구현하려고 한다면, 특별한 도구를 추가로 사용하지 않는 이상 명령형 프로그래밍 방식으로 모든 코드를 구현해야 한다. 따라서 코드가 비교적 길고 복잡해진다.

 

리액트에서는 선언형 프로그래밍 방식으로 동작하기 때문에 아주 간단하게 화면을 구성할 수 있다. 이렇게 동작하는 원리는, 각 컴포넌트라는 파란색으로 표시된 현재의 컴포넌트 상태를 저장하는 아주 특수한 변수가 있기 때문이다.

State가 변경되면 바뀐 State 값에 따라 각각 다른  UI를 화면에 렌더링하도록 설정이 가능하다.

 

 

 

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

 

리액트는 화면 업데이트를 매우 쉽게 구현할 수 있을 뿐만 아니라 업데이트를 매우 빠른 속도로 처리할 수 있다.

 

먼저, 브라우저가 어떻게 동작하는지 살펴보자.

브라우저의 전체 렌더링 과정은, 우리가 웹페이지를 렌더링하기 위해 꼭 거쳐야 하는 중요한 경로라는 의미에서 Critical Rendering Path라고도 한다.

 

 

① HTML은 DOM으로, CSS는 CSS Object Model로 변환한다.

이 때 DOM은 HTML 문서를 브라우저가 이해하기 쉽게 아래처럼 바꾼 객체(Document Object Model)를 의미한다.

CSS 오브젝트 모델도 마찬가지로 CSS 코드를 브라우저가 이해하기 쉬운 형태로 변환한 걸 의미한다.

 

 

② DOM과 CSS Object Model을 합쳐 Render Tree 만들기

 

렌더 트리는 웹페이지의 청사진 또는 웹페이지의 설계도 역할을 한다. DOM에는 HTML 로 표현한 요소들의 위치/배치/모양에 대한 정보가 들어있고, CSS에는 요소들의 스타일과 관련된 모든 정보가 있을 것이다. 따라서 렌더 트리에는 렌더링돼야 하는 모든 정보가 다 포함돼 있기에 웹페이지의 청사진으로 부른다.

 

③ 레이아웃 작업 수행하기

레이아웃은 요소의 배치를 잡는 과정을 말한다. 웹페이지라는 공간 안에 렌더 트리에 포함돼 있는 요소들의 배치를 잡아보는 작업이다.

 

④ Painting

페인팅작업은 실제로 요소를 화면에 그려내는 과정을 의미한다. 이 과정을 거치고 나면 웹페이지를 볼 수 있게 된다.

 

그렇다면 여기서!! 화면의 업데이트는 어떻게 이루어질까? 🤔

화면의 업데이트는 JavaScript가 DOM을 수정하면 발생하게 된다.

 

DOM이 수정되면 브라우저는  Critical Rendering Path의 전체 단계를 다시 진행하게 된다. 그렇기 때문에 렌더 트리를 다시 생성하고, 레이아웃을 잡고, 페인팅을 다시 진행하게 된다. 이를 진행함에 따라 렌더링되는 요소가 변경되면서 업데이트가 실제로 이루어지게 되는 것이다. 

 

이 때 Critical Rendering Path의 전체 고정 중 Layout(Reflow)과 Painting(Repaint)은 상당히 오래 걸리는 작업이다.  이 때문에 자바스크립트로 코딩을 하는 경우, DOM 수정을 최소화하도록 직접 동시 발생 업데이트를 확인해서 한 번에 처리하도록 코드를 구현해야 한다.

 

리액트를 사용하면, 동시에 발생한 업데이트들을 모아서 DOM 수정횟수를 최소화하는 작업을 자동으로 해준다. 따라서 아무리 많은 업데이트를 동시에 발생시킨다 해도, 리액트 대부분의 상황에서 충분히 빠른 속도로 업데이트해준다.

 

리액트가 이렇게 처리해줄 수 있는 이유는, 리액트는 내부적으로 가상 DOM이라는 가상의 DOM을 이용하기 때문이다.

Virtual DOM이란, 실제 브라우저가 렌더링하는 DOM을 Javascript 객체로 카피해 놓은 것이라고 생각하면 된다.

 

 

리액트는 Virtual DOM을 사용하여, 업데이트가 발생하면 DOM을 바로 수정하지 않고 가상 DOM을 수정한다.

동시에 발생한 업데이트가 다 모이면 한 번에 실제 DOM에 반영해준다. 가상 DOM이 일종의 버퍼 역할을 해줌으로써 동시에 여러 업데이트가 한 번에 발생했다고 하더라도, 버추얼 돔에 한 번 다 모였다가 반영되기 때문에 최소한의 횟수로 돔 수정이 가능해지게 되는 것이다.

 

 

*이정환 강사님의 [2024]한 입 크기로 잘라먹는 리액트 : 4-1)강 React.js를 소개합니다를 정리한 내용입니다.*