리액트 이해하기

리액트

웹에서 자바스크립트의 역할이 증대함에 따라, 자바스크립트 개발을 위한 수많은 프레임워크가 개발되었다. Angular, Backbone.js, Derby.js, Vue.js 등의 프레임워크들은 주로 모델과 뷰로 이루어져 있다.

• 모델 : 애플리케이션에서 사용하는 데이터를 관리하는 영역
• 뷰 : 사용자에게 보이는 부분

이런 구조는 사용자에게서 어떤 작업등을 받으면 모델을 수정하고 변경된 사항을 뷰에 반영하도록 설계된다. 이로인한 단점은 애플리케이션 규모가 커지게 되면 상당히 복잡해지고 관리가 잘 되지 않을 시, 성능도 저하될 수 있다는 점이다.

이런 점을 리액트에서는 데이터가 변할때마다 처음부터 새로 렌더링하는 방식으로 애플리케이션 구조를 간단하게 설계할 수 있도록 만들어주었다.

리액트 이해

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 이전 프레임워크들과 달리 오직 뷰만 신경쓰는 라이브러리이다.

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

사용자 화면에 뷰를 보여주는 방식을 렌더링이라고 한다. 이전에 리액트는 사용자의 데이터가 변하면 다시 처음부터 렌더링한다고 했었다. 그렇다면, 어떻게 다시 랜더링하는 방식이 성능적으로 어떻게 최적의 사용자 경험을 제공할 수 있었는지는 리액트의 초기 렌더링과 리렌더링을 알아야 한다.

초기 렌더링

어떤 프레임워크든 라이브러리든지 맨 처음 어떻게 보일지를 정하는 초기 렌더링은 꼭 필요하다. 리액트에서는 render 함수로 이를 다룬다.

이 render함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 반환값으로 객체를 반환하며, 이 객체 내부에 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보가 담겨있다. 컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있다. render함수를 실행하면 재귀적으로 내부의 컴포넌트들도 실행되는 형식이다. 이렇게 렌더링이 끝나게 되면 가지고 있는 정보들을 사용해 HTML 마크업을 만들어서 실제 페이지의 DOM 요소 안에 주입하게 된다.

조화 과정

그렇다면 데이터가 변경되었을 때, 어떻게 업데이트가 진행되는지 알아보는것이 좋겠다. 컴포넌트에서 데이터에 변화가 있을 때, 새로운 요소로 갈아끼우는 작업이 진행이 된다. 이 작업 또한 render함수가 맡아서 진행하며, 변화된 새로운 데이터를 가지고 render함수를 다시 호출하게 되는 것이다. 하지만 이때 반환된 값을 곧바로 DOM에 반영하지 않고, 이전 컴포넌트와 비교 후 최소한의 연산만으로 DOM 트리를 업데이트 하게 된다. 비교 후 최적의 연산을 수행하는 것으로 성능을 증가시켜 최적의 사용자 경험을 제공할 수 있게 된다.

리액트 특징

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

DOM

그 전에 DOM이란, Document Object Model의 약어이다. 즉, 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성된다.

이 DOM을 조작할 때마다 엔진이 웹 페이지를 새로 그리기 때문에 잦은 업데이트는 곧 성능 저하로 이어질 수 있다. 이런 문제로 인해 DOM을 조작하지 않을 수는 없으니, 최소한의 조작으로 작업을 처리하는 방식이 고안되었다.

Virtual DOM

Virtual DOM은 실제 DOM에 접근해 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성해 사용한다. 리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트 할 때는 다음 절차를 밟게 된다.

• 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
• 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
• 바뀐 부분만 실제 DOM에 적용한다.

Virtual DOM을 사용한다고 해서 무조건 더 빠른것은 아니다. 리액트를 사용하는 근본적인 이유는 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축이기 때문에 적절하게 사용하는것이 가장 중요하다.

기타 특징

리액트는 오직 뷰만 제공하기 때문에, 다른 프레임워크가 제공하는 라우팅, 데이터 모델링 등의 기능은 제공하지 않고 직접 구현해야한다는 점이 있다. 이 점은 장점이자 단점일 수 있는데, 장점으로는 개발자가 원하는 여러 라이브러리 혹은 프레임워크와 결합해서 사용할 수 있다는 점이고, 단점으로는 그만큼 여러가지 라이브러리를 접해야만 한다는 점이다.