브라우저에서의 렌더링:
HTML과 CSS 리소스를 기반으로 웹페이젱 필요한 UI를 그리는 과정
리액트에서의 렌더링:
브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정
: 리액트 어플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 의미한다.
렌더링은 또 최초 렌더링, 리렌더링이 있다.
최초렌더링은 말 그대로 사용자가 처음 어플리케이션에 진입하면 당연히 렌더링해야 할 결과물이 필요한데, 리액트는 브라우저에 이 정보를 제공하기 위해 최초 렌더링을 수행하는 것이다.
리렌더링은 처음 어플리케이션에 진입했을 때 최초 렌더링이 발생한 이후로 발생하는 모든 렌더링을 의미한다.
보통 버튼을 통해서 값을 변경하고자 했을때
<button onClick={handleClick}>여기서 handleClick 함수는 단순히 value+=1로 하면 UI에 보여지는 값이 변화되지 않는다.
그 이유는 React에서 UI를 동적으로 업데이트하려면 반드시 state를 사용하고, 적절한 state 업데이트 함수를 통해 값을 변경해야 합니다. 이렇게 해야 React가 변경을 감지하고 컴포넌트를 다시 렌더링하여 화면에 변경사항을 반영할 수 있습니다.
그래서 handleClick 함수는 setState(value+1) 등 state를 변경해야 한다.
React의 렌더링 원리:
React는 state나 props가 변경될 때만 컴포넌트를 다시 렌더링합니다.
일반 변수의 변경은 React가 감지하지 못합니다.
State의 역할:
React의 state는 컴포넌트의 렌더링을 트리거하는 특별한 객체입니다.
setState 함수를 통해 state를 업데이트하면, React는 이를 감지하고 컴포넌트를 다시 렌더링합니다.
일반 변수 vs State:
일반 변수(예: let value = 0)를 변경해도 React는 이를 감지하지 못합니다.
따라서 value += 1과 같은 연산은 값을 변경하지만, 화면에는 반영되지 않습니다.
가상 DOM(Virtual DOM):
React는 가상 DOM을 사용하여 실제 DOM과 비교하고 필요한 부분만 업데이트합니다.
state 변경은 이 가상 DOM을 업데이트하고, 결과적으로 실제 DOM을 업데이트합니다.
리액트의 렌더링은 위에 그림과 같이 Render 단계와 Commit 단계로나뉜다.
렌더 단계는 컴포넌트를 렌더링하고 변경 사항을 계산하는모든 작업을 말한다. 즉, 렌더링 프로세스에서 컴포넌트를 실행하고 이 결과와 이전 가상 DOM을 비교하는 과정을 거쳐 변경이 필요한 컴포넌트를 체크하는 단계이다.
여기서 비교하는 것은 크게 type, props,key이다. 이 세 가지 중 하나라도 변경된 것이 있으면 변경이 필요한 컴포넌트로 체크해 둔다.
그 다음으로 Commit 단계는 렌더 단계의 변경 사항을 실제 DOM에 적용해 사용자에게 보여주는 과정을 말한다.
이 단계가 끝나야 비로소 브라우저의 렌더링이 발생한다.
리액트가 먼저 DOM을 커밋 단계에서 업데이트한다면 이렇게 만들어진 모든 DOM 노드 및 인스턴스를 가리키도록 리액트 내부의 참조를 업데이트한다.
그다음, 생명주기 개념이 있는 클래스 컴포넌트에서는 componentDidMount, componentDidUpdate 메서드를 호출하고, 함수 컴포넌트에서는 useLayoutEffect 훅을 호출한다.
여기서 알 수 있는 중요한 사실은 리액트의 렌더링이 일어난다고 해서 무조건 DOM 업데이트가 일어나는 것은 아니라는 것이다!
렌더링을 수행했으나 커밋 단계까지 갈 필요가 없다면, 즉 변경 사항을 계산했는데 아무런 변경 사항이 감지되지 않는다면 이 컴밋 단계는 생략될 수 있다.
