리액트 -What is react?

What is react ?

리액트를 사용해 컴포넌트를 다뤄보고, 리덕스를 사용해 상태관리를 해보았는데도, 사실 아직 리액트라는것에 대해서 멀게만 느껴졌다. 그래서 리액트라는것에 대한 기초개념과 리액트란 무엇인가에 대해 정리해 포스팅해보겠다.

https://velopert.com/775 

velopert님의 글을 대부분 인용하였다.

>React?

- 리액트라는 것을 들어본 사람이라면 대부분이 말하는 리액트의 설명중 하나는 페이스북에서 개발한 유저 인터페이스 라이브러리라는것이다. 또한 Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 유저인터페이스를 렌더링한다는점도 마찬가지이다. 이를 통해, 최소한의 DOM 처리로 컴포넌트들을 업데이트 할 수 있게 해주는것 역시도 리액트의 특징중 하나이다.

>Virtual DOM?

-virtual dom 이라는 단어를 리액트를 설명할때 많이 사용했는데, 정작 dom, virtual dom에대해 자세히 알고있지 않았다. 따라서 정리해보겠다.

• DOM이란

-DOM 은 Document Object Model 의 약자이다. 이는 객체를 통하여 구조화된 문서를 표현하는 방법이며, XML 혹은 HTML 로 작성된다. 웹 브라우저는 이 DOM 을 활용하여 객체에 JavaScript 와 CSS 를 적용하지요. DOM 은 트리 형태로 되어있어서, 특정 node 를 찾을 수도 있고, 수정 할 수도 있고, 제거하거나 원하는 곳에 삽입 할 수도 있습니다.

• DOM의 문제점

-DOM은 동적인 ui에 적합하지 않다고 한다. html만 생각해도 그자체로 정적이다. 하지만 jquery나, 자바스크립트를 이용하면 손을 볼수 있다고는 한다.

-하지만, 요즘의 큰 규모의 웹 어플리케이션, 예를 들어 트위터나 페이스북을 생각해보면, 정말 수많은 데이터가 로딩된다. 그리고 각 데이터를 표현하는 요소(element)들이 있겠죠. 그 요소들의 개수가 몇백 개, 몇천 개 단위로 많아진다면 (예: 페이스북에서 포스트 한 개를 표현 할 때 사용되는 요소의 개수는 약 100개 입니다) ...ㅎ 이렇게 규모가 큰 웹 어플리케이션에서 DOM 에 직접 접근하여 변화를 주다 보면, 성능상의 이슈가 조금씩 발생하기 시작합니다. 좀 느려진다는 건데요, .....

Q) DOM은 느리다?

A) 일부 문서에서는 이를 두고 요즘의 자바스크립트 엔진은 매우 빠른 반면, DOM 은 느리다 라고 하는데, 이것은 정확한 사실이 아닙니다.

DOM 자체는 빠릅니다. DOM 자체를 읽고 쓸 때의 성능은 자바스크립트 객체를 처리 할 때의 성능과 비교해서 다를 게 없습니다. 단, 브라우저 단에서 DOM 의 변화가 일어나면, 브라우저가 CSS 를 다시 연산하고, 레이아웃을 구성하고, 웹 페이지를 리페인트 하는데, 이 과정에서 시간이 허비되는 것 이랍니다.

• 해결법

HTML 마크업을 시각적인 형태로 변환을 하는 것은 브라우저의 주 역할이기 때문에, 이를 처리 할 때 컴퓨터 자원이 사용되는 것은 어쩔 수 없습니다. 결국엔, 이 문제를 해결하기 위해서 DOM 조작을 아예 안 할 수는 없으니까, 적어도 최소한의 DOM 조작을 통하여 우리의 작업을 처리하는 방식으로 이를 개선 할 수는 있습니다.

만약에 DOM 작업을 가상화 하여 미리 처리한다음에 한꺼번에 적용할 수 있는방법이 있다면 어떨까요?

해결법만 읽어보면 딱 생각나는것이 있다......ㅎ 그런걸보면 리액트가 가지는 특징이자 장점인것이 위의 해결법에 있는 내용임은 분명한것 같다. 그리고 웹에 있어서 ui라는 요소는 매우 중요한 요소였고 시각적으로 변화를 웹에서 많이 주려했고, 더나아가 그런 변화를 최소한의 dom조작으로 해내려했으니 리액트가 나오게 된 것이다. 자연스럽게 리액트가 나오게 된 흐름이 그려졌다.

• Virtual DOM이란

아래글은 velopert 님의 글을 그대로 인용했다. 내 입맛대로 더 추가해보고싶어도 더할나위 없는 설명인것 같기 때문이다.

Virtual DOM 을 사용하면, 실제 DOM 에 접근하여 조작하는 대신에, 이를 추상화 시킨 자바스크립트 객체를 구성하여 사용합니다. 이는 마치 실제 DOM 의 가벼운 사본과도 비슷하죠.

React 에서 데이터가 변하여 브라우저상의 실제 DOM 을 업데이트 할 때에는 다음과 같이 3가지 절차를 밟습니다:
1. 데이터가 업데이트되면, 전체 UI 를 Virtual DOM 에 리렌더링 합니다.
2. 이전 Virtual DOM 에 있던 내용과 현재의 내용을 비교합니다.
3. 바뀐 부분만 실제 DOM 에 적용이 됩니다.

결국에는 컴포넌트가 업데이트 될 때, 레이아웃 계산이 한번만 이뤄집니다.

오해

Virtual DOM을 사용한다고 해서, 사용하지 않았을 때와 비해 무조건 빠른 것은 아닙니다.
React 매뉴얼에 따르면, 다음과 같은 문장이 있습니다:

우리는 다음 문제를 해결하기 위해 React를 만들었습니다:
지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기.

예, 그렇습니다. 결국엔 적절한 곳에 사용해야 React 가 비로소 지니고 있는 진가를 발휘하게 됩니다. React 를 사용하지 않아도 코드 최적화를 열심히 하면 DOM 작업이 느려지는 문제를 개선 할 수 있고, 또 매우 간단한 작업의 경우엔 (예: 단순 라우팅 정도만 있는 정적인 웹페이지) 오히려 React 를 사용하지 않는 편이 더 나은 성능을 보이기도 합니다.

->중요한 점인것 같다. 어떤 기술을 쓸때에는 그 기술이 나오게 된 배경과, 특징을 알고 있어야 더 효율적인 퍼포먼스가 나올것 같다.동적인 ui변경이나 데이터가 크게 변경될일이 없는 사이트를 만들려고 할때는 리액트가 최신기술이라고 해서 무작정 쓰면 오버스펙이 될수도 있기 때문에, 코딩을 잘하는 것도 중요하지만, 쓰고있는 그 기술의 배경 장점,단점등을 파악하는것도 매우 중요하다는 생각이들었다. 

예를들어 펜션소개홈페이지를 만드는데 굳이 리액트를 쓸필요가 없는것이다. 예약현황같이 데이터 변경이 있는 기능이 추가되거나, ui가 ux에 따라 많이 바뀌는 펜션사이트를 만든다면 리액트가 필요하긴 하겠다..ㅎ

반면에, React 와 Virtual DOM 이 우리에게 언제나 제공해 줄 수 있는 것은 바로 업데이트 처리에 대한 간결함입니다. UI 를 업데이트하는 과정에서 생기는 복잡함을 모두 해소해주고, 업데이트에 더욱 쉽게 접근 할 수 있게 해줍니다.