왜 리액트 인가?

라용·2022년 11월 17일
0

리액트를 다루는 기술 책 내용 일부를 발췌 & 정리한 내용입니다.

생각

how 가 아닌 what 을 공부하는 연습을 하면서, 리액트도 다시 봐야겠다는 생각을 했다. 얕은 how 에 대한 지식을 가지고 이렇게 저렇게 쓰고 있지만, 리액트가 왜 리액트인지는 크게 고민해보지 않았다. 그래서 책을 보며 개요 부분을 정리해봤다. 리액트, re-act, 다시 행동하다, 다시 보여주다, 리렌더링... 아마 리액트는 데이터가 바뀔 때마다 뷰를 업데이트 해주는 리렌더링이 포인트가 아닐까 싶다. 리액트와 비교되는 MVC, MVVM 같은 프레임워크들은 사용해본 적이 없으니 V 만 신경쓰는 리액트와 얼마나 어떻게 다른지 감이 오진 않지만, V 만 신경쓰는 리액트가 더 단순한 느낌이다. 리액트의 뷰 업데이트를 조화과정으로 표현한 것도 신선했다. 데이터에 따라 뷰가 바뀌는 것이 맞지만 더 정확히 표현하면 개중에 바뀐 부분만 갈아 끼우는 것인데, render 함수가 반환한 객체(컴포넌트의 생김새와 기능을 정의한)를 DOM에 바로 반영하지 않고 Virtual DOM 이라는 가상 돔을 만들어 리렌더링하고 바뀐 것만 체크해 실제 DOM에 반영한다. 객체 개념도 다시 공부하고 있는데, 모든 게 다 객체인가 싶으면서 객체의 중요성을 새삼 느낀다.


정리

1. 왜 리액트인가?

현대의 자바스크립트는 단순한 스크립트 언어를 넘어 규모가 큰 애플리케이션을 만드는 역할도 수행한다. 규모가 커진 애플리케이션을 더 잘 관리하기 위해 다양한 프레임워크들이 생겨났는데 (Angular Backbone.js, Derby.js .. ) 이런 프레임 워크들은 주로 MVC(Model-View-Controller), MVVM(Model-View-View-Model)을 사용하고 AngularJs 는 MVW(Model-View-Whatever)를 사용한다. 이런 구조가 가진 공통점은 모델과 뷰가 있다는 것인데, 모델은 데이터를 관리하는 영역이고 뷰는 사용자에게 보이는 부분이다. 프로그램이 사용자가 일으킨 이벤트를 감지하면 컨트롤러는 모델 데이터를 조회하거나 수정하고 변경 사항을 뷰에 반영한다.

페이스북 개발팀은 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하지 말고 기존 뷰를 날리고 새로 렌더링 하는 방식을 고안했다. 이렇게 하면 어떤 변화를 줄지 고려하지 않고 새롭게 보여질 뷰만 선언하며 데이터 변화가 있으면 기존 것을 버리고 정해준 규칙에 따라 새로 렌더링하면 된다. 하지만 이렇게 하면 매번 전체를 렌더링 해야 하므로 CPU 점유율도 증가하고 메모리도 많이 사용하게 된다. 이런 문제점을 해결하려고 개발한 것이 리액트다.

1.1 리액트 이해

리액트는 사용자 인터페이스를 만드는 데 사용하는 자바스크립트를 라이브러리 오직 View 만 신경 쓴다. 리액트에는 특정 부분이 어떻게 생길지 정하는 컴포넌트라는 선언체가 있다. 컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장하고 있고, 컴포넌트 하나에 해당 컴포넌트의 생김새와 작동 방식을 정의할 수 있다.

리액트 라이브러리는 데이터가 바뀔 때마다 뷰를 새롭게 리렌더링을 하는 데, 이 때 성능을 아끼고, 최적의 사용자 경험을 제공한다. 이는 리액트 컴포넌트의 초기 렌더링과 데이터 변경시 실행되는 리렌더링과 관련이 있다.

1.1.1 초기 렌더링

리액트는 render() 함수를 통해 초기 렌더링을 진행한다. (컨포넌트의 생김새를 정의) html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다. 컴포넌트 안에는 또 다른 컴포넌트가 들어갈 수 있는데, render 함수를 실행하면 내부 컴포넌트들도 재귀적으로 렌더링한다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 있는 정보들을 사용해 html 마크업을 만들고, 이를 우리가 정하는 실제 페이지의 DOM 요소 안에 주입한다. 컴포넌트를 실제 페이지에 렌더링 할다면, 문자열 형태의 html 코드를 생성한 후 특정 DOM 에 해당 내용을 주입해 이벤트를 적용한다.

1.1.2 조화 과정

리액트의 뷰 업데이트는 조화과정을 거친다고 표현하는 게 더 정확하다. 데이터 변화에 따라 뷰가 변하는 것처러 보이지만, 사실은 새로운 요소로 갈아 끼우는 것이다. 이 작업은 render 함수가 맡아서 한다. (render 함수는 뷰가 어떻게 생겼고, 어떻게 작동하늕에 대한 정보를 지닌 객체를 반환) 새로운 데이터를 가지고 render 함수를 다시 호출하고 그 데이터를 지닌 뷰를 생성한다. 하지만 이때 render 함수가 반환한 결과를 DOM 에 바로 반영하지 않고 이전 render 함수가 만들었던 컴포넌트 정보와 비교한다. 두 가지 뷰를 최소한의 연산으로 비교하고 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트한다.

2 리액트 특징

2.1 Virtual DOM

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

2.1.1 DOM 이란?

DOM 은 객체로 문서 구조를 표현하는 방법이다. XML 이나 html 로 작성한다. 웹 브라우저는 DOM 을 활용해 객체에 자바스크립트와 CSS 를 적용한다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.

기본적으로 DOM 은 동적 UI 에 최적화되어 있지 않다. html 은 자체적으로 정적이고 자바스크립트를 사용해 동적으로 만드는 것이다. 큰 규모의 웹 애플리케이션, 스크롤을 내릴수록 수많은 데이터가 로딩되는 SNS는 각 데이터를 표현하는 요소가 몇 백개, 몇 천 개 단위로 늘어나는데 이때 DOM 에 직접 접근해 변화를 주다 보면 성능 이슈가 발생한다. DOM 자체는 빠르지만 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS 를 다시 연산하고, 레이아웃을 구성하고, 페이지를 리페인트하는 과정에서 시간이 걸린다.

html 마크업을 시각적 형태로 변환하는 것이 브라우저 역할이기 때문에 이를 처리할 때 컴퓨터 자원을 사용하는 것은 어쩔 수 없고, DOM 을 도작할 때마다 엔진이 웹페이지를 새로 그리기 때문에 업데이트가 잦아 성능이 저하된다. 이런 문제를 해결하기 위해 DOM 을 조작하되 그 조작을 최소한으로 조절하는 방법을 찾았는데, 리액트의 Virtual DOM 이 그것이다.

2.1.2 Virual DOM

버추얼 돔은 실제 돔에 접근해 조작하지 않고, 이를 추상화한 자바스크립트 객체를 구성해 사용한다. 실제 돔의 가벼운 사본과 비슷하다. 데이터가 업데이트트 되면 전체 UI 를 버추얼 돔에 리렌더링 하고, 이전 버추얼 돔과 비교해서 바뀐 부분만 실제 돔에 적용한다.

버추얼돔을 사용한다고 해서 사용하지 않을 때와 비교해 무조건 빠른 것은 아니다. 버추얼 돔은 지속적으로 데이터가 변하는 대규모 어플리케이션에 적합하다. 리액트를 사용하지 않아도 코드 최적화를 잘하면 돔 작업은 빨라질 수 있고, 매우 간단한 작업이라면 리액트를 사용하지 않는 게 더 좋을 수 도 있다. 리액트와 버추얼 돔이 제공하는 것은 업데이트 처리의 간결성이다. UI를 업데이트 하는 과정의 복잡함을 해소하고 더 쉽게 업데이트에 접근하게 한다.

profile
Today I Learned

0개의 댓글