본 포스팅은 Udemy의 'React 완벽 가이드' 강의를 듣고, 배운 내용을 기반으로 '제 생각'을 정리한 글입니다.
틀린 부분이 있을 수 있으니 참고로만 봐 주시고, 틀린 점은 지적해주시면 감사하겠습니다.
React는 Web에 대해서 모른다.
React는 사용자 인터페이스를 구축하기 위한 Javascript 라이브러리다. 즉, React의 주요 역할은 컴포넌트와 State를 관리하는 것이라 볼 수 있다.
이 말의 요지는, React는 UI를 직접 HTML에 보여주는 역할을 수행하지 않는다는 것이다.
그렇다면 어떻게 컴포넌트를 Web으로 보여줄까? 바로 React-DOM 라이브러리다. React-DOM은 React가 Web과 통신할 수 있게 해주는 인터페이스 역할을 해준다.
React가 React-DOM에 변경사항을 알린다.
React가 어떻게 컴포넌트의 변경사항을 React-DOM에 알릴까? 요지는, React는 아래 요소들을 모니터링하며, 컴포넌트를 '재평가'하면서 변경사항을 파악한다.
- Props: 부모-자식간의 전달되는 데이터
- State: 컴포넌트 안의 데이터
- Context: 여러 컴포넌트가 사용하는 전역 데이터
- 그외 Redux Store 등등..
React는 이 요소들을 모니터링하고, 값이 바뀔때마다 컴포넌트를 컴포넌트가 바뀌었는지? 재실행하며 평가한다. 그리고 만약 값이 바뀌었으면, 컴포넌트를 업데이트하고 변경사항을 ReactDOM에 알린다.
ReactDOM이 매개체 역할을 한다
그렇다면 어떻게 React-DOM이 컴포넌트를 렌더링할까? 이걸 알기 전에, DOM에 대한 이해가 필요하다. DOM(Document Object Model)은 HTML 문서의 요소들을 Tree로 객체화 한 것으로써, 실제로 브라우저가 DOM을 참조하며 웹 페이지를 렌더링한다.
또한, javascript를 기반으로 개발자가 DOM에 접근할 수 있도록 도와준다. javascript는 이를 위해 DOM API를 기본 제공하며, document.getElementById()같은 함수들이 대표적인 DOM을 다루는 함수이다.
React-DOM은 이 DOM과 React 컴포넌트를 잇는 매개체 역할을 한다. 자세히 말하자면, React-DOM은 컴포넌트의 변경사항을 가상 DOM에 적용하고, 실제 DOM과 비교하여 웹 페이지에 변경사항을 렌더링한다. 그렇다면 왜 직접 DOM에 접근하지 않고, 가상 DOM을 사용하는 것일까?
가상 DOM vs 실제 DOM
실제 DOM은 조작하는데 많은 overhead가 든다. 실제 DOM에는 브라우저가 페이지를 렌더링하기 위한, 값, 스타일(CSS), 미디어 요소 등의 모든 정보가 포함되어 있기 때문이다.
그래서 React는 실제 DOM 대신, 컴포넌트의 상태를 추상화해 간략화한 가상 DOM을 생성하고, 이것을 실제 DOM과 비교하는 것이다.
실제로 React가 어떻게 가상 DOM과 실제 DOM을 비교하는지 알아보자.
- State 변경: React가 한 컴포넌트의 State 변경을 감지하면, 자식 컴포넌트를 순회하며 재평가한다.
- 변경점 검사: 재평가 중에 내용이 바뀐 컴포넌트를
가상 DOM에 갱신한다. - 리-렌더링:
가상 DOM의 바뀐 내용만을실제 DOM에 적용한다.
이 방식의 의의는, 바뀐 부분만 실제 DOM에 적용함으로써, 실제 DOM 연산을 최소화했다는 것이다. 만약 가상 DOM을 사용하지 않았다면, State가 바뀔 때마다 실제 DOM을 전부 갱신해야 했을 것이다.
References
