[스터디 - 리액트를 다루는 기술] 1주차 - 리액트의 특징

리액트란 무엇인가?

 

Facebook에서 개발한 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용하며, 오로지 View만 신경쓰는 라이브러리 입니다. 리액트는 프로젝트에서 특정 부분이 어떻게 생길지, 어떻게 동작할지를 정하는 컴포넌트를 이용하여 View를 렌더링 합니다.

 

렌더링은 사용자 화면에 뷰를 보여주는 것을 말합니다. 리액트 라이브러리는 렌더링에 드는 비용을 최적화 하는데 도움을 줍니다. 그렇다면 어떻게 도움을 주고 있는 것일까요?

 

이 비밀을 파악하려면 리액트의 컴포넌트가 최초로 실행한 초기 렌더링과 컴포넌트의 렌더링에 사용되는 데이터가 변경하면서 일어나는 리렌더링에 대한 의미를 이해해야 합니다.

 

초기 렌더링

 

어떤 UI 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요합니다. 리액트에서는 이를 다루는 render 함수가 있습니다.

 

이 함수는, 컴포넌트가 어떻게 생겼는지를 정의하는 역할을 합니다. 이 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환합니다. 컴포넌트 내부에는 또 다른 컴포넌트 들이 들어갈 수 있습니다. 이 때 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링합니다.

 

여기서 재귀적으로 랜더링 한다는 뜻이 약간 애매할 수 있습니다. 예를들어 다음과 같은 코드가 있다고 가정합니다. 이 때, Hello 라는 컴포넌트가 render 함수를 실행하면 그 안에 있는 Wow 라는 컴포넌트가 render 함수를 실행하게 됩니다. 따라서 가장 바깥에 있는 컴포넌트부터 안에 있는 컴포넌트 순서대로 render 함수를 실행합니다.

 

<Hello>
  <Wow />
  <Wow />
</Hello>

컴포넌트를 실제 페이지에 렌더링할 때는 분리된 두 가지 절차를 따르는데, 먼저 문자열 형태의 HTML 코드를 생성한 후, 특정 DOM에 해당 내용을 주입하여 이벤트를 적용합니다.

 

리렌더링

 

리액트 라이브러리에서 중요한 부분인 업데이트를 어떻게 진행하는지 알아보겠습니다. 리액트 컴포넌트에서 데이터에 변화가 있을 때, 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우는 것입니다.

 

컴포넌트는 데이터를 업데이트 했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출합니다. 결과적으로 그 데이터를 지닌 뷰를 생성해 내는 것입니다.

 

하지만, 이 때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고 이전에 render 함수가 만들었던 정보와 현재 render 함수가 만든 정보를 비교합니다. 그러면 변경되어야 할 부분이 보이겠죠?

 

자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 하는 것입니다. 이러한 비교를 위해서 리액트에서는 Virtual DOM을 사용하고 있습니다.

 

리액트의 특징

• Component
• JSX (JavaScript XML)
• Virtual DOM
• 단방향 데이터 바인딩

 

# Component

 

컴포넌트란 UI를 구성하는 개별적인 view 단위이다. 전체의 앱은 각 컴포넌트를 조립하여 만들어지며, 모듈화를 통해 유지, 보수가 용이하다는 장점이 있다. 

 

 

# JSX

 

React에 새로 도입된 자바스크립트 문법으로 React 에서만 사용할수 있다.

JSX를 사용하는 가장 중요한 이유는 코드의 직관성 이다.

 

HTML과 Javascript를 분리하여 개발하는 것이 기존의 개발 방법이었으나, 한쪽의 코드만 보았을때 어떻게 동작하는지 알수가 없기 때문에

개발자가 View에만 신경쓸수 있도록 View를 직관적으로 보여줄수 있게끔 HTML 과 Javascript를 합친듯한 JSX를 도입하였다.

 

 

# Virtual DOM

 

DOM은 브라우저가 화면을 그리기 위한 정보를 담고 있는 문서 객체이다.

이전 JQuery의 경우 실제 DOM을 변경할 때,

변경할 부분이 일부분일지라도 DOM 전체를 다시 렌더링해야 했기 때문에 성능이 저하된다는 단점이 있었다.

 

하지만 React는 렌더링 시 Virtual DOM을 만들어 실제 DOM과 비교를 한다.

그 후, 변경이 있는 부분 (하위 컴포넌트)만 대체를 하기 때문에 불필요한 리소스 낭비를 줄일수 있다.

 

Virtual DOM

 

# 단방향 데이터 바인딩

 

React 내에서 데이터의 흐름은 부모에서 자식 으로 단방향적이다.

그렇기 때문에 디버깅에 용이하며, 다른 라이브러리에 비해 안정성이 높다.

 

정리

리액트는 컴포넌트를 처음에 전부 렌더링을 하고나서, 데이터가 변경된 이후에 다시 렌더링을 필요로 할 때, 변경된 태그를 Virtual DOM에 렌더링합니다. 그리고나서 이전에 렌더링 되었던 값과 비교 후, 바뀐 부분만 실제 DOM에 적용합니다.

 

Virtual DOM을 사용한다고 해서 사용하지 않을 때와 비교하여 무조건 빠른 것은 아닙니다. 리액트 매뉴얼에는 다음과 같은 문장이 있습니다.

 

 

"우리는 다음 문제를 해결하려고 리액트를 만들었습니다."

"지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기"

 

 

결국에는 적절한 곳에 사용해야 리액트가 지닌 진가를 비로소 발휘할 수 있습니다.