리액트 렌더 단계

[gs0428]

1. 렌더링 트리거

컴포넌트가 렌더링이 되는데에는 두 가지 이유가 있다.

• 컴포넌트의 첫 렌더링인 경우
• 컴포넌트(혹은 상위 요소)의 상태가 업데이트 된 경우

첫 렌더링인 경우

처음 애플리케이션이 시작되면 화면에 보여줘야하기 때문에 렌더링이 발생한다.

렌더링하고자 하는 DOM 노드를 createRoot로 호출한 다음, 컴포넌트로 render 메서드를 호출하면 된다.

상태가 업데이트된 경우

컴포넌트가 상태를 업데이트하게 되면 자동으로 렌더링이 대기열에 추가가 된다.

2. React가 컴포넌트를 렌더링

렌더링은 React에서 컴포넌트를 호출하는 것이다.

1. 첫 렌더링에서 React는 루트 컴포넌트를 호출한다.
2. 이후 렌더링에서 React는 상태 업데이트에 의해 렌더링이 발동된 함수 컴포넌트를 호출한다.

중첩된 컴포넌트가 더 이상 없고 React가 화면에 표시되어야 하는 내용을 정확히 알 때까지 이 단계는 재귀적으로 호출된다.

3. React가 DOM에 변경사항을 커밋

컴포넌트를 렌더링한 후 React는 DOM을 수정한다.

• 초기 렌더링의 경우 React는 appendChild() DOM API를 사용하여 생성한 모든 DOM 노드를 화면에 표시한다.
• 리렌더링의 경우 필요한 최소한의 작업, 즉 렌더링하는 동안 계산된 것을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 한다.

React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경한다.

export default function Clock({ time }) {
  return (
    <>
      <h1>{time}</h1>
      <input />
    </>
  );
}

위 코드에서 input 입력 후 props로 받는 time이 바뀌어도 input의 위치가 변화된 것은 아니므로 input의 value는 유지가 된다.

참고

• react.dev