Today I Learned
ReactDOM.render는 몇번 호출되는가?
: 매일 사용하지만 신경을 쓰지 않는
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);이부분은 해당 어플리케이션이 처음 렌더링될 때 혹은 새로고침시에만 activate된다. 이후로는 re rendering 되는 부분에 대해서만 내부적으로 virtualDOM 비교를 통해 렌더 메서드를 다시(여기 index.js가 아닌) 호출하는 것 같다. 그리고 이에 따라 실제 dom에 대해 변경사항이 적용되는 로직으로 되있다고 생각된다. 실제 개발자 도구로 봐도 root node인 <div id="root"> 의 자식 태그들 전체가 항상 리렌더링 되는 것이 아니다. 특정 state가 속하는 부분만 리렌더링된다(리플로우, 리페인트).
React 가 대중적인 라이브러리가 된 이유
: 리액트는 JSX로 개발→ 그걸 React 내부에서 createElement를 통해 js 객체 형태로 자동으로 변환하고, 이를 바탕으로 실제 DOM을 만든다(document.createElement를 생각하면 쉽다). 그리고 이 DOM을 실제로 html 상에서 그리도록 appendChild 하는 로직으로 돼있다(간단히 말하면).
그러면, 예를 들어, props가 바뀌거나, state가 변하는 상황이 생기면 어떻게 될까? 그러면 리액트 내부적으로 만들어놓은 virtualDOM(메모리 상에 상주하는)과 새로 그린 또다른 VirtualDOM을 가지고 내부 휴리스틱 로직(O(n)의 시간복잡도라고 한다)으로 둘을 비교한다. 그래서 그중에 차이가 나는 지점을 찾으면 그 지점만 리렌더링한다(querySelector로 특정 부분을 선택해서, 그 부분에만 업데이트를 해주는 dom api 사용을 떠올리면 쉽다). 이 때, 리액트만의 휴리스틱 알고리즘이 굉장히 획기적이었기에 리액트는 대중적인 라이브러리가 됐다고 한다..ㅎㅎ
결과적으로 위의 이유로 렌더링 최적화가 필요한 것이다. 쓸데없이 리렌더링이 발생한다면, 결국 해당 부분에 대해서 렌더 트리를 구조화하고, 리플로우, 리페인트 과정이 일어나 리소스를 사용하게 되니까 말이다.
Next Questions
- 그러면, useState, props 변화 등을 통해 특정 컴포넌트가 리렌더링이 되는 상황이 발생했을 때, ReactDOM은 어떤식으로 DOM API를 호출하며, 그 부분만 리렌더링하도록 하는걸까?
- 함수 컴포넌트를 생각했을 때, 특정 함수 컴포넌트가 속해있는 파일(js파일)에 하지만, 함수 컴포넌트 내부가 아닌 바깥에 있는 변수는 직관적으로 생각했을 때 global context에 존재하게 되는데, 이 직관은 맞을까?
- 2번째 물음에 더하여 Hooks 를 심화 공부해보자.
