statecontextreconciliation

React에서 리렌더링이 발생하는 조건을 설명해 주세요

예상 시간
6분
30초 답변

꼬리질문

조금 더 깊게 물어본다면

답변 뒤에 이어질 수 있는 질문들을 하나씩 열어볼 수 있어요.

리렌더링과 DOM 업데이트는 같은 말인가요?

부가 설명

처음에는 “state가 바뀐 컴포넌트만 다시 그려진다”고 생각하기 쉽습니다. 그런데 부모가 다시 렌더링되면 자식도 기본적으로 다시 렌더링될 수 있습니다. 이때 자식의 props 값이 같아 보여도 함수 컴포넌트는 다시 호출될 수 있습니다.

function Parent() {
  const [count, setCount] = useState(0);
 
  return (
    <>
      <button onClick={() => setCount(count + 1)}>+</button>
      <Child />
    </>
  );
}

count가 바뀌면 Parent가 다시 렌더링되고, 그 과정에서 Child도 다시 렌더링될 수 있습니다. 하지만 Child의 실제 DOM이 바뀌지 않는다면 commit 단계에서 DOM 변경은 일어나지 않을 수 있습니다.

한 줄 정리

React의 리렌더링은 “DOM을 다시 그린다”가 아니라 “컴포넌트의 다음 UI 결과를 다시 계산한다”에 가깝습니다.