⚛️ React란 무엇인가요?

리액트란 2013년에 release된 페이스북에서 만들어진 라이브러리이다. 리액트의 가장 큰 특징은 Components 단위로 기능이 구성된다는 점, Virtual DOM 패턴인 점이 있다.

🙋‍♀️ Components요?

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.

리액트 공식 홈페이지에서는 다음과 같이 Component를 말하고 있다. react로 개발한 앱은 Component 단위로 화면을 구성하는데, 해당 Component들은 조각과 같아서 기능을 모듈화 해서 가지고 있으면 해당 기능이 필요한 여러 곳들에 모듈처럼 import를 해서 사용할 수 있다. 따라서, 재사용성이 아주 뛰어난 것이 특징이다.

🙋‍♀️ Virtual DOM이요?

사실 해당 개념을 가르키는 정확한 명칭이 있다는 것은 처음 알았다.🥲👍

Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다.

리액트 공식 홈페이지에서는 다음과 같이 Virtual DOM을 설명한다. 무슨말인가 싶지만 react를 한번이라도 접해본 사람은 아~ 할만한 내용이다.
우선 Virtual DOM과 React DOM의 차이를 알아보자.

Real DOM과 Virtual DOM의 차이

예를 들어 리스트가 10개가 있는데 여기에서 한개만 값의 변화가 일어났다. Real DOM에서는 변화가 일어난 한개의 값을 반영시키기 위해서 전체를 리로드 시킨다. 하지만 Virtual DOM은 하나만 업데이트 되었기 때문에 변경된 해당 부분만 업데이트를 한다.

대단하지만 그걸 어떻게..?

Virtual DOM에서는 우선, 10개의 리스트를 snap shot을 찍어두듯 기억해둔다. 리스트 중 하나가 업데이트 되었을 때 Virtual DOM은 snap shot을 찍어둔 것과 새로 업데이트 된 것을 하나하나 살펴보면서 차이를 분석한 후, 바뀐 부분만 Real DOM에서 바꾸어준다.

요렇게 한다면 전체를 리로드 하는 것 보다 훨씬 더 자원을 아끼면서 업데이트 하는 것이 가능하다.👍

➕ 참고

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 를 공부하며 작성한 글입니다.