👩‍🎨 최적화 (useMemo, useCallback, React.memo)

✨ 최적화란?

동일한 결과를 더 적은 자원(CPU, 메모리, 네트워크 등)으로 만들어내는 기술적인 노력이다.

프론트엔드에서의 최적화는 단순히 빠르게 보이게 하는 것뿐 아니라, 사용자 경험(UX)을 향상시키고, 불필요한 계산과 렌더링을 줄여 성능을 개선하는 것을 목표로 한다.

🔧 React 최적화 방법 3가지

React는 기본적으로 상태나 props가 변경될 때 컴포넌트를 다시 렌더링한다. 이 과정에서 불필요한 연산이나 함수 생성, 리렌더링이 발생하면 앱의 성능이 떨어질 수 있다. React는 다음과 같은 3가지의 최적화 방법이 있다!
1. 컴포넌트 내부의 불필요한 연산을 방지한다. → useMemo

2. 불필요한 함수 재생성을 막는다. → useCallback

3. 컴포넌트의 불필요한 리렌더링을 막는다. → React.memo

📦 props란?

컴포넌트 외부에서 내부로 값을 전달해주는 방법이다.

function SayHello(props) {
  return <p>안녕하세요, {props.name}님!</p>;
}

<SayHello name="수진" />

sayHello("수진")에서 "수진"은 <SayHello name="수진" /> 의 props인 name에 해당하는 값이다.

1. useMemo

복잡한 계산 결과를 기억해서, 불필요하게 다시 계산하지 않도록 막아주는 React 훅이다.
연산량이 많은 작업에서 컴포넌트가 리렌더링될 때마다 계산이 반복되는게 아깝다고 느껴질 때 사용한다.

const memoizedValue = useMemo(() => {
  // 복잡한 연산
  return 계산결과;
}, [의존값]);

의존값이 바뀔 때만 함수를 다시 실행하고, 바뀌지 않으면 이전 결과를 재사용한다.

2. useCallback

함수를 기억해서, 불필요하게 매번 새로 만들어지는 걸 방지하는 React 훅이다.
함수가 자식컴포넌트에 props로 전달되면 자식 컴포넌트도 불필요하게 리렌더링 될 수 있다. useCallback를 사용하면, 함수의 참조를 유지해서 리렌더링을 최적화할 수 있다.

const memoizedFunction = useCallback(() => {
  // 함수 로직
}, [의존값]);

의존값이 바뀌지 않으면 함수는 이전 그대로 재사용된다. React.memo와 함께 쓰면 자식 컴포넌트의 리렌더링을 방지할 수 있다.

3. React.memo

컴포넌트를 기억해서, props가 바뀌지 않으면 리렌더링을 막아주는 고차 컴포넌트이다.
자식 컴포넌트가 props가 바뀌지 않았는데도 계속 렌더링될 수 있다.
React.memo를 사용하면, props가 바뀌지 않는 한 리렌더링을 생략할 수 있다.

const MemoizedComponent = React.memo(MyComponent);

MyComponent를 기억된 컴포넌트로 만들어 props가 바뀌지 않으면 다시 렌더링하지 않도록 하는 방식이다.

✍️ 느낀점

프론트엔드 개발을 처음 시작했을 때는, 화면에 내가 원하는 UI가 잘 보이기만 하면 끝이라고 생각했었었다. 그런데 요즘 실제 프로젝트를 해보면서, 화면에 아무 이상 없어 보여도 그 안에서 불필요한 렌더링이나 계산이 계속 발생하고 있다는 것을 깨닫게 되었다. 이러한 것들이 쌓이면 결국 사용자 경험에 좋지 않은 영향을 줄 수 있다는 것도 알게 되었다.

이번에 useMemo, useCallback, React.memo 같은 최적화 기법을 배우면서,
사용자에게 더 좋은 경험을 주기 위한 노력을 해야겠다는 생각이 들었다.

아직은 익숙하지 않은 부분도 있지만...., 앞으로는 단순히 기능만 구현하는 개발자가 아니라 불필요한 연산과 리렌더링을 의식하고, 더 나은 성능을 위해 고민하는 개발자가 되어야겠다는 생각이 들었다.