리렌더링 — 언제, 왜 컴포넌트가 다시 그려질까?
Article
React를 배우다 보면 리렌더링이라는 말을 자주 듣게 됩니다. "불필요한 리렌더링을 줄여야 한다", "리렌더링이 너무 많이 일어난다" 같은 이야기들이요.
그런데 리렌더링이 정확히 무엇이고, 언제 일어나는 걸까요?
리렌더링이란
리렌더링은 컴포넌트 함수가 다시 실행되는 것입니다.
React에서 컴포넌트는 함수입니다. 화면을 처음 그릴 때 이 함수가 실행되고, 무언가 바뀌면 다시 실행됩니다. 이 "다시 실행"이 리렌더링입니다.
function Greeting({ name }) {
console.log("Greeting 컴포넌트 실행됨");
return <h1>안녕하세요, {name}님!</h1>;
}
이 컴포넌트가 리렌더링되면, console.log가 다시 찍힙니다. 함수 전체가 위에서 아래로 다시 실행되기 때문입니다.
리렌더링이 일어나는 3가지 경우
1. State가 바뀔 때
가장 기본적인 경우입니다. useState로 관리하는 상태가 바뀌면 해당 컴포넌트가 리렌더링됩니다.
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
클릭: {count}
</button>
);
}
버튼을 클릭하면 count가 바뀌고, Counter 컴포넌트가 다시 실행됩니다.
2. Props가 바뀔 때
부모 컴포넌트가 전달하는 props가 달라지면, 자식 컴포넌트도 리렌더링됩니다.
function Parent() {
const [name, setName] = useState("민초리");
return <Child name={name} />;
}
function Child({ name }) {
return <p>이름: {name}</p>;
}
Parent의 name 상태가 바뀌면 Child에 전달되는 props도 바뀌니까, Child도 리렌더링됩니다.
3. 부모가 리렌더링될 때
이게 의외로 중요합니다. 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링됩니다. props가 바뀌지 않았더라도요.
function Parent() {
const [count, setCount] = useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>+1</button>
<Child /> {/* props가 없어도 부모가 리렌더링되면 같이 리렌더링됨 */}
</div>
);
}
function Child() {
console.log("Child 리렌더링됨");
return <p>저는 자식입니다</p>;
}
Parent의 count가 바뀌면 Parent가 리렌더링되고, Child도 함께 리렌더링됩니다. Child에 아무 변화가 없더라도요.
리렌더링은 실제 DOM 업데이트가 아닙니다
여기서 중요한 포인트가 있습니다.
리렌더링 = 실제 화면 변경이 아닙니다.
이전 글에서 배운 가상DOM을 기억하시나요? 리렌더링이 일어나면 React는 새로운 가상DOM을 만듭니다. 그리고 이전 가상DOM과 비교해서 달라진 부분만 실제 DOM에 반영합니다.
그래서 컴포넌트가 리렌더링되더라도, 반환하는 JSX가 이전과 같다면 실제 DOM은 건드리지 않습니다. 가상DOM이 이 불필요한 실제 업데이트를 걸러주는 겁니다.
비유하자면, 리렌더링은 "확인 작업"에 가깝습니다. "바뀐 거 있나?" 확인하고, 없으면 그냥 넘어갑니다.
불필요한 리렌더링, 너무 겁먹지 마세요
React를 처음 배울 때 "리렌더링이 많으면 성능이 나빠진다"는 말을 듣고 겁먹기 쉽습니다.
하지만 실제로는 대부분의 리렌더링이 문제를 일으키지 않습니다. React의 가상DOM이 효율적으로 걸러주기 때문입니다.
성능 최적화는 실제로 문제가 느껴질 때 하면 됩니다. 처음부터 리렌더링을 줄이려고 복잡한 코드를 쓰면 오히려 코드가 어려워집니다.
먼저 동작하는 코드를 만들고, 느려지면 그때 최적화하세요. 그게 React의 권장 방식이기도 합니다.
정리
- 리렌더링은 컴포넌트 함수가 다시 실행되는 것입니다.
- 3가지 경우에 일어납니다: state 변경, props 변경, 부모 리렌더링.
- 리렌더링이 일어나도 가상DOM이 비교해서 달라진 부분만 실제 화면에 반영합니다.
- 불필요한 리렌더링에 너무 걱정하지 마세요. 실제로 느려질 때 최적화하면 됩니다.
다음 글에서는 리스트를 그릴 때 꼭 필요한 key가 왜 중요한지 알아보겠습니다.