비전공자의 입장에서 React 를 공부하고 활용하기 이전에 React 의 배경에 대해서 정리하는 것이
앞으로의 이해에 있어서 도움도 되고 지식 쌓는 의미도 있지 않을까 해서
차근차근 정리를 해보려 합니다.
처음 자바 스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했습니다.
하지만, 현재는 웹 어플리케이션에서 가장 핵심적인 역할을 할 정도로 큰 성장을 거뒀는데요.
페이스북, 디스코드, 페이팔, 이베이 등 거대한 어플리케이션들이 자바 스크립트로 어플리케이션을 개발할 수 있는 프레임워크를 통해서 제작이 되었다고 합니다.
지금까지 수많은 프레임워크가 있어왔고,
대부분의 프레임워크들을 MVC(Model-View-Controller) 아키텍처를 사용하거나
MVVM(Model-View-View Model) 아키텍처로 어플리케이션을 구조화 하였습니다.
또는 MVW(Model-View-Whatever) 아키텍처를 사용하기도 합니다.
어쨌거나 위 아키텍처들의 공통점은 Model 과 View가 개별적으로 존재한다는 것입니다.
저도 뭐 아키텍처를 자세히 알지는 못하고 그림으로 이해하자면 아래와 같은 것 같습니다..
사용자에게 직접적으로 보여지는 부분이 View 라면 Model 은 해당 View 에 직접적으로 영향을 끼치지 않습니다.
Model 이 DB 쪽에서 데이터를 조회하고, 이를 반영하기 위해서 Controller 를 거치는 꼴이 된다고 보면 될 것 같습니다.
A ~ Z 까지의 데이터를 사용자에게 보여주고 있다가, 갑자기 A를 빼고 싶어진다면?
A 라는 데이터를 찾아서 해당 데이터를 제거하는 규칙을 Controller 에 추가함으로써 View 를 수정되게 하는 겁니다.
그런데 이게 단순한 규칙이라 쉬워 보이지만, 어플리케이션의 규모가 커지면 커질수록 얽힌 규칙들이 많아서 그런지 몰라도
문제가 많았던 것 같습니다.
그래서 페이스북 개발팀이 이를 해결하고자 만든 것이 “React”라고 하는군요.
어떤 데이터가 변할 때마다, 어떤 변화를 줄지 고민하지 않고, 그냥 통째로 기존 View를 버리고 다시 처음부터 View 를 랜더링하는 방식을 가져온 겁니다.
앞서 나열했던 MVC 같은 모델과 달리 React 는 오로지 View 만 신경을 쓴 라이브러리입니다.
바로 앞에서 React 는 기존 View 를 날려버리고 다시 랜더링하는 방식을 사용한다고 그랬는데,
이런 방식을 사용하면 아무래도 느리고, 메모리도 많이 사용되는 문제가 발생할 수 있었습니다.
때문에 React 는 “컴포넌트” 라고 하는 재사용이 가능한 API를 이용합니다.
재사용이 가능하든 것이 핵심 키워드인데요.
때문에 이 컴포넌트가 최초로 실행될 때인 “초기 랜더링” 과
데이터 변경으로 인해 다시 실행이 되는 “리랜더링”의 작동 방식이 다르다고 합니다.
초기 랜더링의 경우,
render() 라는 함수를 사용하게 되는데요. 이 함수는 컴포넌트가 어떤 구조를 가지고 있는지 정의하는 역할을 합니다.
이 함수는 곧바로 html 을 생성하는 것이 아니라, View 가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환하게 됩니다.
render 함수를 실행하면 그 내부에 있는 컴포넌트들이 재귀적으로 랜더링이 되는 건데…
아래 그림과 같이 여러 노드들이 최상위 노드에서 줄줄이 이어져 나오는 구조물을 만드는 것이라고 보면 될 것 같습니다.
중요한 부분은 이제 데이터가 변경이 되었을 때 어떻게 다시 랜더링을 하느냐는 부분입니다.
이때 쓰는 올바른 표현이 “조화 과정을 거친다” 라는 표현이라고 하는군요.
특정한 데이터가 변경이 되었을 때, 컴포넌트는 단순히 해당하는 데이터를 업데이트하는 것이 아니라,
새로운 데이터를 가지고 다시 render() 함수를 실행하게 됩니다.
그렇다면 해당 데이터를 가지고 다시 한 번 View 를 생성하는 것인데, 이때 곧바로 사용자에게 보이는 DOM에 반영하지 않고
이전에 render 함수를 통해 만들었던 전체 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교합니다!
아래의 그림처럼 기존 Virtual DOM 과 새로운 Virtual DOM 을 비교해서 어느 부분만 다시 Render 하는 과정이 필요한지 확인하는 겁니다.
이 과정을 통해서 업데이트가 필요한 부분만을 빠르게 연산이 가능하게 돕고,
다시 랜더링이 되더라도 리소스를 많이 잡아먹지 않게 되는 겁니다.
그런데… DOM이 뭔지는 아시나요?
비전공자의 입장에서 꼭 뭐 좀 공부하려고 그러면 공부 속에 공부가 꽃피어 납니다..
DOM은 Document Object Model 의 약자라고 하는군요.
즉, 객체로 문서 구조를 표현하는 방법이라고 합니다.
우리가 사용하는 웹 브라우저가 아래와 같이 DOM 구조로 이뤄졌다고 합니다.
이렇게 각 요소마다 따로 묶어두기 때문에 CSS 를 적용할 때도 특정 속성으로 분류된 부분에 한 번에 적용도 가능하고,
특정 노드를 찾아 수정하거나 제거하는 방식이 수월합니다.
기본적으로 html 은 정적인 상태이고,
이러한 html 이 동적으로 움직이게 만드는 역할을 자바스크립트가 합니다.
그런데, 요즘 나오는 규모가 대단한 웹 어플리케이션은 이런 동적인 변화를 한 번에 100개 이상 줘야 할 때도 많습니다.
DOM 에 접근해서 각 문서에 변화를 주는 방식 자체는 그렇게 오래 걸리지는 않는다고 합니다.
하지만, 사용자가 이용하는 브라우저가 이 변화를 인식하고 CSS 를 다시 연산하고, 레이아웃을 다시 구성하고, 페이지를 보여주는 과정에서 상당히 시간이 허비가 됩니다.
때문에 이 DOM 의 연산을 최소화하기 위해서 나타난 방식이 React에서 사용했던 Virtual DOM인 것입니다!
Virtual DOM 을 활용하여 실제 사용자에게 보여주기까지 다음과 같은 과정을 거칩니다.
1. 업데이트 된 데이터를 통한 UI를 Virtual DOM 에 리랜더링 합니다.
2. 이전 Virtual DOM 에 있던 내용과 현재 내용을 비교합니다.
3. 바뀐 부분만 실제 DOM에 적용합니다.
요번에 “리액트를 다루는 기술” 이라는 출판사 길벗의 도서를 구매하여 공부를 시작했습니다.
간혹 공부한 내용을 정리하고, 공부한 내용을 활용하는 방식으로 더 깊이 기억할 수 있도록 노력하려 합니다.^^