2020-12-01 :: 리액트 시작하기

Why React?

리액트 기반의 많은 프레임 워크가 등장했다.(Angular, Vue 등등..) 이 프레임워크들의 구조는 공통적으로 Model과 View를 가지고 있다. Model은 데이터를 관리하는 영역이고 view는 사용자에게 보여지는 부분이다. 이러한 구조에는 단점이 있다. 어플의 규모가 크고 수정해야할 사항이 많은 경우에 성능이 저하되는 점이다.

이를 해결하기 위해 새로 제시된 것이 기존의 뷰를 다 날려버리고 처음부터 새로 랜더링 하는 React이다. 다만 이러한 작업이 DOM에서 이루어질 경우에는 더욱 비효율적으로 변하는데 이를 React-DOM을 통해 극복했다.

리액트 이해

리액트는 자바스크립트 기반의 라이브러리로 사용자 인터페이스를 만드는데 사용된다. 리액트의 아키텍처는 다른 프레임워크와 달리 오직 view만 신경쓴다.

리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데 이를 컴포넌트라고 한다. 컴포넌트는 재사용이 가능한 API로 수많은 기장을 내장하고 있으며, 하나의 컴포넌트 안에는 해당 컴포넌트의 view와 작동 방식을 정의할 수 있다.

앞서 리액트가 기존 뷰를 버리고 처음부터 리랜더링 하여 성능 향상을 도모했다고 말했는데, 이를 이해하기 위해서는 초기 렌더링과 리렌더링을 알아야한다.

초기 렌더링

어떤 프레임워크, 라이브러리를 사용하던 초기 화면을 어떻게 보일지 결정하는 초기 렌더링이 필요하다. 리액트의 경우에는 render()함수가 이를 담당한다. 이 함수는 컴포넌트의 생김새를 정의한다. 또한 단순 html형식의 문자열을 반환하는 것이 아니라. 어떻게 작동하는지에 대한 정보를 추가로 담아 객체를 반환한다.

조화과정

리액트에서 업데이트가 이루어질 때 사실 조화 과정(reconciliation)을 거치는다는 표현이 더욱 정확하다. 데이터가 변할 때 사용자 입장에서는 그저 뷰가 변화되는 것 처럼 보이지만 사실은 새로운 요소로 리렌더링 되기 때문이다.

리렌더링 역시 render()함수를 통해서 이루어진다. 데이터가 변한 경우 render()함수는 새로운 데이터를 가지고 다시 호출된다. 다만 새로 반환된 객체를 바로 DOM에 반영하지 않고 앞선 객체와 비교를 한다. 그 후 최소한의 연산을 통해 DOM 트리를 업데이트 한다.

리액트의 특징

리액트의 주요 특징 중 하나는 Virtual DOM을 사용한다는 점이다.

DOM이란?

virtual DOM을 알아보기 전에, 먼저 DOM에 대해 간단히 정리해보자. DOM은 Document Object Model의 약자로 객체를 통해 문서 구조를 표현하는 방법이다. DOM은 XML이나 HTML으로 작성된다. 웹 브라우저는 DOM을 활용하여 객체에 CSS나 JS를 적용한다.

DOM의 단점은 동적 UI에 최적화되어 있지 않다는 것이다. DOM자체의 성능은 절대 느리지 않지만, 데이터 변화가 발생할 때 CSS를 다시 연산하고 레이아웃을 구성하여 리렌더링 하여 시간이 많이 소요된다.

Virtual DOM

이러한 문제점들을 해결하기 위해 제시된 것이 Virtual DOM이다. 리액트는 Virtual DOM 방식을 사용하여 DOM업데이트를 추상화함으로써 DOM 처리 횟수를 최소화 했다.

Virtual DOM은 실제 DOM에 바로 접근하는 대신 자바스크립트 객체를 구성한다. 리액트로 구성된 페이지에서 데이터가 변화한 경우 다음과 같은 과정이 발생한다.

1. 데이터가 업데이트되면 전체 UI를 Virtual DOM에 리렌더링 한다.
2. 이전 Virtual DOM과 새로 생성된 Virtual DOM을 비교한다.
3. 변경된 부분만 실제 DOM에 적용한다.

그렇다고 해서 리액트가 마냥 빠른 것은 아니다. 공식 문서에도 나와 있듯이 리액트는 지속적으로 데이터가 변화하는 대규모 어플리케이션을 구축할 때 가장 큰 효율을 낸다. 즉 리액트의 가장 큰 장점은 업데이트 처리 간결성이다.

리액트의 라이브러리적 특징

다시 강조하자면 리액트는 프레임 워크가 아닌 라이브러리이다. 따라서 다른 프레임 워크가 기본적으로 내장하고 있는 Ajax, 데이터 모델링, 라우팅과 같은 기능이 없다. 리액트는 뷰만 신경쓰는 라이브러리이므로 기타 기능은 직접 구현해서 사용해야한다. 물론 다른 개발자들이 만든 좋은 툴 역시 많다.

이러한 상황 때문에 어떤 스택을 사용해야하나 혼란스러울 수도 있지만, 반대로 본인의 취향대로 스택을 선택할 수도 있다. 대표적으로 라우팅에는 리액트 라우터, Ajax 처리에는 axios나 fetch, 상태 관리에는 Redux나 MobX를 사용한다. 또한 리액트는 다른 프레임 워크와 함께 사용 할 수 있다.