성능 좋은 컴포넌트를 만들기 위해 알아야 할 것들

2025-03-16

이번 포스팅에서는 성능 좋은 컴포넌트를 설계하기 위해 알아두면 좋을 것들에 대해 이야기하려고 합니다.

React에서 성능 개선이라고 하면 React.memo, useMemo, useCallback을 써서 개선하는 게 전부라고 생각하는 사람이 있을지도 모릅니다. 일단 제가 예전에는 그런 사람이었습니다. 🫣

하지만 컴포넌트 설계만 잘 해도 쉽게 성능 개선을 할 수 있습니다.

오늘 그 방법에 대해 소개하겠습니다.

여기에 Parent 컴포넌트와 많은 계산이 필요한 HeavyChild 컴포넌트가 있습니다.

브라우저에서 확인하면 버튼 반응 속도가 상당히 느린 것을 볼 수 있습니다. Parent 컴포넌트가 리렌더링될 때마다 HeavyChild 컴포넌트도 매번 리렌더링 되기 때문에 이는 당연한 결과입니다.

그럼 이런 상황에서 memo를 쓰지 않고도 어떻게 성능 개선을 할 수 있을까요?

두 가지 방법이 있습니다. 하나씩 살펴보겠습니다.

1. props로 넘겨주기

React에서는 부모 컴포넌트가 리렌더링되면 기본적으로 모든 하위 컴포넌트도 리렌더링됩니다. 이것은 React로 개발하고 있는 분들이라면 모르는 사람이 없을 기본 동작입니다.

그럼 props는 어떻게 될까요? props는 부모 컴포넌트에서 하위 컴포넌트로 전달되는 “데이터”입니다. 부모가 리렌더링될 때, 하위 컴포넌트가 전달 받고 있는 props 중에서 상태 변화가 없는 props는 ‘이전 상태 그대로’ 전달됩니다.

위에서 봤던 컴포넌트들을 해당 내용을 작용해서 개선해보겠습니다.

브라우저에서 확인해보면 HeavyChild 컴포넌트가 더 이상 리렌더링되지 않습니다. 버튼 반응 속도도 빨라졌습니다. 확실히 성능 개선이 되었습니다.

children으로 HeavyChild 컴포넌트를 넘겨주는 경우에도 위와 동일하게 HeavyChild 컴포넌트가 더 이상 리렌더링되지 않는 것을 확인할 수 있습니다.

컴포넌트 설계만 조금 바꿔도 성능을 개선할 수 있는 방법을 정리해보았습니다. 개발하실 때 도움이 되었으면 좋겠습니다.

끝까지 읽어주셔서 감사합니다. 😊

아래 영상도 같이 보면 많은 도움이 되실 거예요!