React의 렌더링과 커밋 과정: 개념부터 이해하기

React를 사용하다 보면 "렌더링(Render)"과 "커밋(Commit)"이라는 용어를 자주 접하게 된다.
이 개념을 명확하게 이해하면 React의 동작 원리를 더 잘 파악할 수 있고, 성능을 최적화하는 데도 도움이 된다.

이 글에서는 React의 렌더링과 커밋 과정이 각각 무엇을 의미하는지, 그리고 이를 어떻게 활용하면 좋을지 정리해보려고 한다.

---

1. 렌더링(Render)이란?

React에서 렌더링이란, 컴포넌트가 UI를 어떻게 표시할지를 결정하는 과정이다.
즉, 컴포넌트 함수가 실행되면서 새로운 UI를 생성하는 단계라고 보면 된다.

function Greeting({ name }) {
  return <h1>안녕하세요, {name}!</h1>;
}

위 코드에서 Greeting 컴포넌트가 실행되면 name 값에 따라 다른 UI를 생성하게 된다.
React는 이처럼 렌더링을 통해 새로운 UI를 계산하고, 변화가 필요한 부분을 찾아낸다.

하지만 렌더링이 곧 브라우저 화면이 업데이트되는 건 아니다.
React는 렌더링 결과를 먼저 메모리에 저장해두고, 실제 화면을 바꾸기 전에 한 번 더 최적화 과정을 거친다.

언제 렌더링이 발생할까?

React에서 컴포넌트가 다시 렌더링되는 주요 이유는 다음과 같다.

- 상태(State)가 변경될 때

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

setCount를 호출하면 상태가 변경되고, 컴포넌트가 다시 렌더링된다.

1. 부모 컴포넌트가 렌더링될 때
   부모 컴포넌트가 다시 렌더링되면, 자식 컴포넌트도 함께 렌더링될 수 있다.
2. context 값이 변경될 때
   useContext를 사용하는 경우, context 값이 바뀌면 이를 구독하고 있는 컴포넌트가 다시 렌더링된다.
3. props가 변경될 때
   부모로부터 전달받는 props 값이 바뀌면, 해당 props를 사용하는 컴포넌트는 다시 렌더링된다.

---

2. 커밋(Commit)이란?

React에서 커밋 단계는 렌더링이 끝난 후, 실제 DOM을 업데이트하는 과정이다.
React는 렌더링 결과를 메모리에 저장한 뒤, 실제 변경이 필요한 부분만 찾아서 브라우저에 적용한다.

즉, 렌더링은 UI를 계산하는 단계, 커밋은 브라우저 화면을 실제로 변경하는 단계라고 보면 된다.

커밋 과정에서 일어나는 일

• 변경된 DOM 요소를 업데이트하거나 추가/삭제한다.
• useEffect와 같은 라이프사이클 훅이 실행된다.
• React에서 화면을 다시 그리도록 요청한다.

useEffect(() => {
  console.log('컴포넌트가 화면에 나타남');
  return () => {
    console.log('컴포넌트가 화면에서 사라짐');
  };
}, []);

위 코드에서 useEffect 내부의 함수는 커밋 단계에서 실행된다.
즉, 실제로 DOM이 업데이트된 이후에 동작하게 된다.

---

3. 렌더링과 커밋의 차이를 한눈에 이해하기

단계	설명
렌더링	컴포넌트가 실행되어 새로운 UI를 계산하는 단계
커밋	React가 변화된 UI를 실제 DOM에 반영하는 단계

렌더링이 일어난다고 해서 반드시 커밋이 되는 것은 아니다.
React는 렌더링 후 변경된 부분만 커밋하는 방식을 사용해 성능을 최적화한다.

---

4. React의 최적화 전략: 불필요한 렌더링 줄이기

렌더링과 커밋 과정을 잘 이해하면, React의 성능을 더 효율적으로 관리할 수 있다.
특히, 불필요한 렌더링을 줄이는 것이 중요한데, 이를 위한 몇 가지 방법을 소개한다.

1) React.memo 사용하기

React.memo를 사용하면, 동일한 props로 다시 렌더링될 필요가 없는 컴포넌트를 최적화할 수 있다.

const Greeting = React.memo(function Greeting({ name }) {
  return <h1>안녕하세요, {name}!</h1>;
});

이제 name 값이 변경되지 않는 한, Greeting 컴포넌트는 불필요하게 다시 렌더링되지 않는다.

2) useMemo와 useCallback 활용하기

useMemo와 useCallback을 사용하면 불필요한 연산과 함수 재생성을 줄일 수 있다.

const value = useMemo(() => complexCalculation(input), [input]);
const handleClick = useCallback(() => setCount(count + 1), [count]);

이렇게 하면 input이 바뀔 때만 complexCalculation이 실행되고,
count가 바뀔 때만 새로운 handleClick 함수가 생성된다.

---

5. 마무리

React의 렌더링과 커밋 과정은 단순한 것 같지만, 이를 깊이 이해하면 더 효율적인 컴포넌트를 만들 수 있다.

• 렌더링은 UI를 계산하는 과정이고,
• 커밋은 실제 DOM을 업데이트하는 과정이다.

React는 불필요한 커밋을 최소화하는 방식으로 동작하며,
최적화를 통해 성능을 더욱 개선할 수 있다.

오늘도 즐코 빡코 !!