원문 : https://www.joshwcomeau.com/react/why-react-re-renders/
나는 리액트의 리렌더링에 대해서 막연하게 '리렌더링'은 나쁜 것이다. 단순히 피해야할 것, 최적화는 하면 할 수록 좋은 것이다. 라고만 생각해왔다.
하지만 최근에 리렌더링에 관련한 글들을 읽으면서 조금씩 그에 대한 생각들이 변화하고 있다. 리렌더링이 나쁜지에 대해 판가름을 하는 것에 앞서서 리렌더링이 어떠한 때에 발생하는지에 대해 우선적으로 이해를 하는 것이 필요하다.
👀 리액트는 언제 리렌더링을 할까?
리액트의 모든 리렌더링은 상태 변경에서 시작된다.
✔️ 리렌더링은 상태를 가지고 있는 컴포넌트와 해당 컴포넌트의 하위 컴포넌트에만 영향을 준다.
즉, 상태 변수가 변경될 때마다 전체 앱이 리렌더링되는 것은 아니라는 점!
✔️ 컴포넌트가 다시 렌더링되면 props를 통해 특정 상태 변수가 전달되는지 여부에 관계없이 모든 하위 컴포넌트를 다시 렌더링하려고 시도한다.
즉, props가 변경되기 때문에 컴포넌트가 다시 렌더링되는 것이 아님!
✍️ 리액트의 첫번째 목표
사용자가 보는 UI가 애플리케이션 상태화 “동기화” 상태를 유지하도록 하는 것이다. 따라서 리액트에서는 지나치게 많은 렌더링이 발생할 수도 있다. 사용자에게 오래된 UI를 보여주는 위험을 감수하고 싶지 않기 때문!
🤟 순수 컴포넌트 만들기
React.memo 또는 React.PureComponent 사용하면 특정 리렌더링 요청을 무시할 수 있다.
function Decoration(){
return <div className="decoration">deco</div>;
}
export default React.memo(Decoration);위의 React.memo를 통해 “이 컴포넌트는 순수합니다. props가 변경되지 않는 한 다시 렌더링을 할 필요가 없습니다” 라고 알려준다.
메모이제이션이라고 알려진 기술을 사용하는 것이다.
👉 props가 하나도 변경되지 않은 경우 리액트는 오래된 스냅샷을 재사용하여 완전히 새로운 스냅샷을 생성하는 문제를 피할 수 있다.
여기서 우리가 짚고 넘어가야할 점이 있다.
리렌더링은 무조건 피해야할까?
개발자로서 우리는 리렌더링에 드는 비용을 과대평가하는 경향이 있다. 위의 Decoration 컴포넌트의 경우 리렌더링이 번개처럼 빠르다.
컴포넌트에 많은 props가 있고 자손이 많지 않은 경우 컴포넌트를 다시 렌더링하는 것과 비교하여 props가 변경되었는지 확인하는 것이 실제로 더 느릴 수 있다.
따라서, 우리가 만드는 모든 단일 컴포넌트를 메모하는 것은 비생산적이다. 리액트는 스냅샷을 정말 빠르게 캡처하도록 설계되어있다! 그러나 특정 상황에서 자손이 많은 컴포넌트나 내부 작업이 많은 컴포넌트의 경우 React.memo가 꽤 도움이 될 수 있다.
👀 컨텍스트에서의 리렌더링은 어떨까?
컴포넌트의 상태가 변경되면 모든 하위 컴포넌트가 리렌더링되는 것처럼 컨텍스트가 변경이 되었을 때 해당 컨텍스트를 사용하는 컴포넌트는 다시 리렌더링이 된다. 즉 동일한 개념으로 작동한다!
const GreetUser = React.memo(() => {
const user = React.useContext(UserContext);
if (!user) {
return "Hi there!";
}
return `Hello ${user.name}!`;
});위의 컴포넌트는 결국 아래와 동일하게 작동한다.
const GreetUser = React.memo(({ user }) => {
if (!user) {
return "Hi there!";
}
return `Hello ${user.name}!`;
});마지막으로, 위의 원문 글에서는 과도하게 최적화하지 말라는 것을 권고하고 있다.
리액트 프로파일러에 대해 배울 때 가능한 한 렌더링 수를 줄이는 것을 목표로 최적화를 계속하고 싶은 마음이 들지만 솔직히 기본적으로 리액트는 이미 매우 잘 최적화되어 있다. 리액트 프로파일러는 약간 느려지는 것 같다고 생각하기 시작할 때에 성능 문제에 대한 해답으로 사용되는 것이 가장 적절하다고 생각한다.
