React

React 렌더링: 화면이 바뀌는 과정

React는 다음 화면의 모습을 계산한 뒤, 필요한 부분을 브라우저의 DOM에 반영합니다.

이럴 때 필요해요

컴포넌트가 다시 실행됐다는 로그와 실제 화면 변경을 구분하면, 중복 실행이나 화면 갱신 문제를 더 정확하게 찾을 수 있습니다.

어떻게 동작하나요?

다음 화면의 모습 계산하기

상품 수량이 0에서 1로 바뀌면 화면의 글자도 바뀌어야 합니다. React 컴포넌트는 props와 state를 읽어 “지금은 어떤 화면이어야 하는가”를 계산합니다. JSX는 그 화면의 모습을 적는 문법입니다. HTML 문자열을 직접 붙여 넣는 것은 아닙니다.

계산과 DOM 반영 구분하기

React가 컴포넌트를 호출해 다음 화면의 모습을 계산하는 단계를 렌더(Render)라고 합니다. 계산이 끝나면 기존 화면과 비교해 필요한 변경을 브라우저의 DOM에 적용합니다. 이 단계를 커밋(Commit)이라고 합니다. 같은 모습을 계산했다면 컴포넌트가 다시 실행돼도 DOM은 바뀌지 않을 수 있습니다.

이름을 바꾸면 어떤 일이 생길까요?

아래 Greeting은 이름을 받아 인사말의 모습을 반환합니다. 이름이 수진에서 지수로 바뀌면 React는 새 인사말을 계산한 뒤 필요한 글자를 DOM에 반영합니다. DOM 반영 이후 브라우저가 화면을 그리는 과정은 페인트(Paint)이며 별도 단계입니다.

코드 예제

동작을 설명하는 읽기 전용 예제입니다.

example.jsx

function Greeting({ name }) {
  return <h1>안녕하세요, {name}</h1>;
}
// 부모 컴포넌트의 화면 안에서 사용
<Greeting name="수진" />

jsx · 읽기 전용5줄

Greeting은 이름으로 인사말을 계산하는 컴포넌트입니다. 위 선언을 읽는 것만으로 DOM이 생기지는 않습니다. React가 화면 안에서 컴포넌트를 렌더하고 결과를 커밋해야 브라우저에 반영됩니다.

이 개념으로 실습하기

동작 실습상태 스냅샷과 업데이트 대기열상태에 값을 직접 전달할 때와 업데이터 함수를 전달할 때의 결과 차이를 비교해 볼 수 있습니다.

심화 원리와 적용 범위

화면 계산에서 지켜야 할 것

화면 계산은 다시 시도되거나 결과가 버려질 수도 있으므로 렌더 중에는 통신 요청이나 전역 변수 변경 같은 외부 작업을 하지 않습니다. 이처럼 같은 입력으로 같은 결과를 계산하는 성질을 순수성이라고 합니다. 화면의 모습을 메모리에 표현하는 것을 흔히 가상 DOM이라 부르지만 직접 DOM을 바꾸는 방법보다 항상 빠르다는 뜻은 아닙니다.

자주 헷갈리는 포인트

렌더 로그가 두 번 찍혔다고 해서 실제 DOM이 두 번 변경되었다고 결론 내리지 않습니다.
렌더 본문 안에서 API 변경 요청이나 전역 변수 변경 같은 외부 부작용을 실행하지 않습니다.

내 말로 설명해 보기

같은 UI를 반환한 재렌더에서 실제 DOM 변경이 없을 수 있는 이유는 무엇인가요?

생각할 단서 화면 계산과 DOM 변경을 별도 단계로 나눠 설명해 보세요.

예시 답변 확인

설명에 들어갈 핵심

렌더는 다음 화면을 계산하는 단계입니다.
커밋 단계에서 실제로 필요한 DOM 변경만 적용합니다.
이전과 같은 출력이라면 DOM 변경이 없을 수 있습니다.

예시 답변

컴포넌트가 다시 실행되어도 이전과 같은 화면을 계산할 수 있습니다. React가 커밋 단계에서 실제로 바꿀 DOM이 없다고 판단하면 DOM 변경은 없습니다. 렌더 로그 수를 DOM 변경 횟수로 읽으면 안 됩니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.

공식 참고 자료

← React