최근 여러 프로젝트에서 React를 이용해 웹 애플리케이션을 개발하면서 성능 최적화에 대한 필요성을 느끼게 되었습니다. 특히 사용자 경험을 개선하기 위해 접속 속도를 높이는 것은 매우 중요한 요소입니다. 이번 글에서는 제가 실제로 경험한 React 알림 구성 요소 최적화 과정을 공유하고, 이를 통해 접속 속도를 개선한 사례를 소개하겠습니다.

1. 문제의 발견

저는 최근 프로젝트에서 사용자에게 알림을 보내는 기능을 구현했습니다. 초기 구현 상태는 다음과 같았습니다.

import React, { useState, useEffect } from 'react';

const Notification = ({ message, onClose }) => {
  return (
    <div className="notification">
      <p>{message}</p>
      <button onClick={onClose}>닫기</button>
    </div>
  );
};

const App = () => {
  const [notifications, setNotifications] = useState([]);

  const addNotification = (msg) => {
    setNotifications((prev) => [...prev, msg]);
  };

  const removeNotification = (index) => {
    setNotifications((prev) => prev.filter((_, i) => i !== index));
  };

  useEffect(() => {
    // 예시로 알림 추가
    addNotification("새로운 메시지가 도착했습니다!");
  }, []);

  return (
    <div>
      {notifications.map((msg, index) => (
        <Notification key={index} message={msg} onClose={() => removeNotification(index)} />
      ))}
    </div>
  );
};

export default App;

위의 코드에서 알림 구성 요소는 사용자에게 메시지를 전달하기 위해 매번 새로운 알림이 생성될 때마다 전체적인 리렌더링을 유발했습니다. 이로 인해 알림이 많아질수록 성능 저하가 심각해졌습니다.

2. 최적화 접근법

성능 개선을 위해서는 다음 두 가지 접근법을 고려했습니다.

  • React.memo: 컴포넌트 리렌더링을 최적화
  • useCallback: 불필요한 함수 재생성을 방지

2.1 React.memo 활용

React.memo는 props가 변경되지 않는 한 컴포넌트를 리렌더링하지 않도록 하는 고차 컴포넌트입니다. 이를 통해 알림 구성 요소가 필요할 때만 렌더링되도록 최적화할 수 있었습니다.

const Notification = React.memo(({ message, onClose }) => {
  return (
    <div className="notification">
      <p>{message}</p>
      <button onClick={onClose}>닫기</button>
    </div>
  );
});

2.2 useCallback 활용

removeNotification 함수 역시 매번 새로 생성될 필요가 없으므로 useCallback을 사용하여 메모이제이션 함으로써 성능을 개선했습니다.

const App = () => {
  const [notifications, setNotifications] = useState([]);

  const addNotification = (msg) => {
    setNotifications((prev) => [...prev, msg]);
  };

  const removeNotification = useCallback((index) => {
    setNotifications((prev) => prev.filter((_, i) => i !== index));
  }, []);

  // 생략된 코드...
};

3. 최적화 결과

위와 같은 방법으로 최적화를 진행한 후, 성능을 측정해본 결과 초기 로드 속도가 눈에 띄게 개선되었습니다. 특히 많은 수의 알림이 존재할 때의 리렌더링 성능이 크게 향상되었습니다.

일반적인 사용자 경험으로도 알림이 빠르게 나타나고, 닫기 버튼 클릭 시 즉각적으로 반응하는 것을 확인할 수 있었습니다. 이러한 최적화는 사용자 만족도를 높이는 데 큰 역할을 했습니다.

마무리

이번 경험을 통해 React로 구성 요소를 최적화하는 방법을 실질적으로 적용하며 얻은 결과는 매우 긍정적이었습니다. 성능 개선은 단순히 코드 최적화에 그치지 않고, 사용자 경험에 직접적인 영향을 미친다는 사실을 다시 한번 깨달았습니다. 앞으로도 이러한 최적화 기법을 다른 프로젝트에 적용하여 더 나은 성능을 이끌어낼 수 있도록 노력할 것입니다.

프론트엔드 개발자 여러분들도 이렇게 작은 최적화로 큰 변화를 만들어낼 수 있다는 점을 잊지 마시길 바랍니다.