React는 고객들의 요청을 받고 주문을 가져오는 웨이터이다.- 렌더링 트리거(Triggering)
- 컴포넌트 렌더링
- DOM에 커밋
- 렌더링 트리거 (Trigger a render)
- 컴포넌트 렌더링이 일어나는 두 가지 이유
- 컴포넌트의 첫 렌더링인 경우
- 컴포넌트의
state(또는 상위 요소 중의 하나)가 업데이트 된 경우
- 첫 렌더링 (Initial Rendering)
- 앱을 실행하기 위해선 첫 렌더링을 트리거 해야한다.
target DOM 노드로 createRoot를 호출한 다음 render 메서드를 호출하면 된다.
state가 업데이트 되면 리렌더링 한다.- 컴포넌트가 처음 렌더링되면
set 함수로 state를 업데이트하여 추가 렌더링을 트리거 할 수 있다. state를 업데이트 하면 자동으로 렌더링이 대기열에 추가된다.
React가 컴포넌트를 렌더링한다.- 렌더링을 트리거하면,
React는 컴포넌트를 호출하여 화면에 표시할 내용을 파악한다.
- 렌더링은
React에서 컴포넌트를 호출하는 것이다.
- 이 과정은 재귀적이다.
- 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면 React는 해당 컴포넌트를 다음에 렌더링하고 해당 컴포넌트도 무언가를 반환하면 해당 컴포넌트 다음에 렌더링 하는 방식이다.
- 더 이상 중첩된 컴포넌트가 없고,
React가 화면에 표시해야 할 내용을 정확히 알 때 까지 이 과정은 계속된다.
export default function Gallery() {
return (
<section>
<h1>Inspiring Sculptures</h1>
<Image />
<Image />
<Image />
</section>
);
}
function Image() {
return (
<img
src="<https://i.imgur.com/ZF6s192.jpg>"
alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
/>
);
}
- 첫 렌더링을 하는 동안
React는 <section>, <h1>, <img> 태그에 대한 DOM 노드를 생성한다.
- 리렌더링하는 동안 React는 이전 렌더링 이후 변경된 속성을 계산(calculation) 한다.
- 다음 단계인 커밋(commit) 단계까지는 해당 정보로 아무런 작업도 수행하지 않는다.
렌더링은 항상 순수한 계산(pure calculation)이어야 한다.
- 동일한 입력에는 동일한 출력을 해야한다.
- 동일한 입력이 주어지면 컴포넌트는 항상 동일한 JSX를 반환해야 한다.
- 그렇지 않으면 코드베이스가 복잡해짐에 따라 혼란스러운 버그와 예측 불가능한 동작이 발생할 수 있다.
업데이트된 컴포넌트 내에 중첩된 모든 컴포넌트를 렌더링하는 동작은 업데이트 된 컴포넌트가 트리에서 매우 높에 있는 경우 성능 최적화가 되지 않는다. 링크
React가 DOM에 변경사항을 커밋- 초기 렌더링의 경우
React는 appendChild() DOM API를 사용하여 생성된 모든 DOM 노드를 화면에 표시한다.
- 리렌더링의 경우
React는 필요한 최소한의 작업(렌더링하는 동안 계산된 것)을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 한다.
- React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경한다.
- ex) 매초 부모로부터 전달된 다른 props로 다시 렌더링하는 컴포넌트가 있다면,
<input>에 텍스트를 입력하여 value를 업데이트 하지만 컴포넌트가 리렌더링될 때 텍스트가 사라지지 않는다.
export default function Clock({ time }) {
return (
<>
<h1>{time}</h1>
<input />
</>
);
}
- 마지막 단계에서
React가 <h1>의 내용만 새로운 time으로 업데이트 하기 때문에, <input>이 JSX에서 이전과 같은 자리에 있으므로 React는 <input>태그를 건드리지 않는다.