렌더링 ≠ 화면 변경: 결과 계산

1. "렌더링"이란

흔히 아는 렌더링

보통 "렌더링"이라고 하면
화면을 다시 그리는 것이라고 생각하는 경우가 많다.

예를 들어
버튼을 눌렀더니, 화면이 바뀌고
뭔가 새로 그려지는 느낌이다.

그래서 자연스럽게
렌더링은 화면이 바뀐다라고 받아들이게 된다.

React에서의 렌더링

React에서의 렌더링은 조금 다르게 정의해야 한다.

컴포넌트 함수가 다시 실행되는 것

예를 들어 이런 코드가 있다고 해보자.

function App() {
  console.log("렌더링 실행");

  return <h1>Hello</h1>;
}

이 컴포넌트는 처음 실행될 때 한 번 실행되고 끝나는 것이 아니라,

상태가 바뀔 때마다 다시 실행된다.

결과적으로는 화면이 바뀌는 것처럼 보이기 때문에
렌더링을 화면을 다시 그리는 것 정도로만 오해하기 쉽다.

하지만 React 내부에서는

1. 함수 실행
2. 결과 생성
3. (이후 과정 존재)

이 흐름을 먼저 가져간다.

렌더링을 설계도를 만드는 과정으로 생각하면 훨씬 쉬워진다.

• 컴포넌트 실행 = 설계도 다시 만듦
• 화면 변경 = 설계도 실제 반영

즉 렌더링은 화면을 바꾸는 단계가 아니라
결과를 만드는 단계다.

---

2. React는 언제 다시 실행될까

렌더링이 컴포넌트 함수 실행이라는 것을 알았으니
중요한 질문이 하나 남는다.

그래서 컴포넌트는 언제 다시 실행될까

state가 바뀌면

가장 기본이자 핵심이다.

const [count, setCount] = useState(0);

여기서

setCount(1);

이 순간 컴포넌트 함수가 다시 실행된다.

state를 화면을 결정하는 재료라고 생각하면 편하다.
재료가 바뀌게 된다면 결과를 다시 계산해야 한다.

그래서 화면을 결정하는 state가 바뀌면
컴포넌트 함수가 다시 실행된다.

props가 바뀌면

부모에서 자식으로 데이터를 내려줄 때

<Child value={count} />

부모에서 count가 바뀌면 새로운 props가 전달되면서 자식 컴포넌트도 다시 실행된다.

구조적으로 이런 식이 된다.

1. 부모 실행
2. 새로운 props 전달
3. 자식도 다시 실행

부모가 렌더링되면 자식도 같이

꼭 props가 바뀌지 않아도 실행된다.

예를 들어

function Parent() {
  const [count, setCount] = useState(0);

  return <Child />;
}

여기서 setCount 호출하면
Parent가 다시 실행되고, 그 과정에서 Child도 함께 다시 실행된다.

왜냐하면 React 입장에서는

Parent를 다시 실행되면
그 안에 있는 Child도 다시 실행된다.

이렇게 보는 것이다.

정리하자면 렌더링 트리거는 다음 세 가지로 볼 수 있다.

• state 변경
• props 변경
• 부모 컴포넌트 렌더링

---

3. 렌더링이 발생하면 벌어지는 일

컴포넌트 함수는 결국 JSX를 반환한다.

function App() {
  return <h1>Hello</h1>;
}

이 코드를 실행하면 결과로 JSX 형태의 구조가 만들어진다.

JSX는 UI를 선언적으로 표현하기 위한 문법이다.

이렇게 보면 된다.

<h1>Hello</h1>

이건 "이런 UI를 만들겠다"라는
설계도에 가까운 표현이다.

이 과정을 정리해보면 다음과 같다.

1. 컴포넌트 실행
2. 새로운 JSX가 생성됨

---

4. 화면을 업데이트하는 방식

우선 다시 떠올려야 할 것이 있다.

• 렌더링 ≠ 화면 변경
• 렌더링 = 결과 계산

즉 state가 변경되어 컴포넌트가 실행되고,
JSX가 생성된 지금 상태는 다음과 같다고 말할 수 있다.

새로운 UI 설계도는 만들어졌는데
아직 실제 화면에는 반영 안 된 상태

필요한 부분만

React는 새로운 결과를 바탕으로 실제 화면을 업데이트한다.
여기서 중요한 건 전체를 다 갈아엎지 않는다는 것이다.

우리가 생각하는 렌더링은 화면 전체를 다시 그리는 방식이다.

하지만 React에서의 렌더링은 결과를 만든 뒤 필요한 부분만 반영하는 과정에 가깝다.

설계도로 다시 비유하자면

• 렌더링 = 새 설계도 작성
• 화면 변경 = 공사

근데 공사를 할 때
건물 전체를 부수는 게 아니라 바뀐 부분만 공사한다.

React도 같은 방식으로
렌더링 이후 이전 결과와 비교해 바뀐 부분만 화면에 반영된다.

---

5. 렌더링이 많으면 문제가 될까?

많은 사람들이 헷갈리는 부분이다.

렌더링이 많이 발생하면 성능이 나쁜 것 아닐까?

직관적으로는 맞는 말 같다.

자주 실행되고, 많이 반복되면
비효율적이라고 오해하기 쉽다.

React 기준에서 보기

React 기준에서 렌더링 자체는 큰 비용이 드는 작업이 아닐 수 있다.

왜냐하면 렌더링은 기본적으로 컴포넌트 함수 실행 과정이기 때문이다.

진짜 비용이 큰 건 실제 화면(DOM)을 바꾸는 작업으로,
이게 훨씬 무겁다.

그래서 구조는 다음과 같이 봐야 한다.

• 렌더링 (가벼움)
• 실제 화면 변경 (무거움)

그래서 React는 렌더링은 다시 수행하되,
실제 DOM 변경은 최소화하는 방향으로 동작한다.

---

6. 핵심 정리

• 렌더링은 컴포넌트 함수가 다시 실행되는 것이다.
• state, props, 부모 렌더링에 의해 발생한다.
• 렌더링 결과로 새로운 JSX 구조가 생성된다.
• 이 시점에서는 아직 화면이 바뀌지 않는다.
• 이후 실제 화면이 업데이트되는 과정이 따로 존재한다.
• 렌더링 자체보다 중요한 것은 실제 화면 변경 비용이다.

---