How Does React Work?
먼저 React가 어떻게 동작하는지 알아보자.
React는 이전에도 언급했듯이 사용자 interface를 구축하기 위한 JavaScript library이다.
이는 절대 변하지 않는 React의 핵심 개념으로 구축하기 위해서 component를 사용한다.
React가 component 개념을 통해 사용자 interface를 효과적으로 구성하며 이에 대한 업데이트 역시 component를 통해 진행된다.
이 과정에서 ReactDOM이라는 것이 나오는데 이는 웹에 대한 interface를 다루는 것이다.
React는 사실 웹을 모른다. 브라우저와 전혀 관계가 없다.
어떻게 component를 다루는지는 알고 있지만 이러한 component에 HTML 요소들이 포함되어 있는지 상관할 바가 아니다.
이는 실제 HTML 요소들을 화면에 표시해주는 ReactDOM이 고려해야할 것이다.
React는 전반적으로 component, state, props, context를 포함한 여러 내장 기능들을 관리한다.
결과적으로 React는 바뀌어야하는 여러 데이터들의 변경 전후의 상태를 확인하는 library이다.
그리고, React는 변경된 내용과 어떤 화면이든간에 화면에 표시되어야 할 모든 정보를 ReactDOM에게 전달한다.
ReactDOM은 브라우저의 일부인 실제 DOM에 대한 작업을 하며, 사용자가 보고 있는 화면에 무언가를 표시하는 역할을 한다.
만약 여기서 props나 state와 같은 값들이 변경되면 component 역시 React를 통해 변경된다.
이와 같은 상황에서 React는 ReactDOM에게 이를 알려 새로운 화면과 새로운 component로 새 출력을 표시할 수 있게 한다.
React가 하는 최종적인 역할은 가상의 DOM을 만드는 것이라고 할 수 있다.
이 가상 DOM은 앱이 마지막에 만들어내는 component tree를 결정한다.
각각의 하위 tree를 갖는 component들의 JSX 코드 반환을 통해 이 가상 DOM이 component tree의 현재 모양과 최종 모양을 정한다.
가령, state가 업데이트된 정보는 ReactDOM으로 전달되어 갱신 전후의 상태 차이를 인식한다.
이에 React가 component tree를 통해 구성한 가상의 snapshot인 가상 DOM과 일치하도록 실제 DOM을 조작하는 방법을 사용한다.
Re-Evaluating Components !== Re-Rendering the DOM
여기서 중요한 것은 React가 시행하는 재평가가 DOM을 다시 렌더링하는 것을 의미하지 않는다.
더 자세히 알아보기 위해서는 component, React, 실제 DOM을 구별할 수 있어야 한다.
이전에 이야기했듯이 component는 state, props, context가 변경될 때 React를 통해 component 함수가 재실행된다.
이에 반해 실제 DOM은 component 이전 상태와 tree, 현재 상태와의 차이점을 기반으로 변경이 필요한 때에만 업데이트된다.
즉, 실제 DOM은 필요한 경우에만 변경되어 성능적인 측면에서 상당한 이점이 있다.
이 작업은 메모리 안에서만 발생되어 간편하고 자원도 적게든다는 특징이 있다.
실제 DOM을 사용하는 작업은 성능부하가 많이 발생하기 때문에 자원이 많이 필요하게 된다.
자식 component는 부모 component의 일부분이기 때문에 부모 component 함수가 재실행되면 마찬가지로 자식 component도 재실행된다. (심지어 props로 연결된 값이 없더라고 할지라도)
props의 변경은 실제 DOM의 변경으로 이어질 수 있지만 연결되어있지 않은 경우에는 부모 component를 재평가하는 것만으로 충분하다.
연결된 모든 component 함수가 재실행되면 굉장히 많은 함수들이 가상 비교를 시행한다는 의미다.
그러면 성능에는 영향을 미치지 않을까? 사실 그렇지 않다.
React가 이런 식의 실행과 비교 작업에 최적화있는 것은 말할 것도 없기 때문에 다수의 어플리케이션 환경에서는 전혀 문제되지 않는다.
하지만 더 큰 어플리케이션이라면 좀 더 최적화가 필요할 수 있다. 따라서 개발자는 특정한 상황일 경우에만 재실행하도록 지시할 수 있다.
(여기서 언급하는 특정한 상황은 component가 받은 props가 변경되는 것과 같은 상황이다.)
