React - 성능 최적화, 불필요한 렌더링 방지를 위한 코드 리뷰

오늘은 React에서 불필요한 렌더링을 방지하여 애플리케이션의 성능을 개선하는 방법에 대해 알아보려고 합니다. 제가 최근에 받은 코드 리뷰 요청 중에서 이 문제를 잘 보여주는 예시를 하나 골랐습니다.

 

요청 받은 코드

요청받은 코드는 아래와 같습니다.

import React, { useState } from 'react';

function UserProfile({ user }) {
  const [age, setAge] = useState(user.age);

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{age}</p>
      <button onClick={() => setAge(age + 1)}>Increase Age</button>
    </div>
  );
}

export default UserProfile;

위 코드는 UserProfile 컴포넌트를 정의하고 있습니다. 이 컴포넌트는 user 객체를 받아 이름과 나이를 보여주고, 'Increase Age' 버튼을 누르면 나이를 증가시킵니다.

 

 

이슈 해결 방안

이 컴포넌트는 user 객체가 변경될 때마다 불필요하게 렌더링됩니다. 이는 React의 useEffect 훅을 사용하여 해결할 수 있습니다. useState에서 초기 나이 값을 설정하는 로직을 useEffect 내부로 옮겨, user 객체가 변경될 때만 나이를 업데이트하도록 코드를 수정하겠습니다.

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

function UserProfile({ user }) {
  const [age, setAge] = useState(user.age);

  useEffect(() => {
    setAge(user.age);
  }, [user]);

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{age}</p>
      <button onClick={() => setAge(age + 1)}>Increase Age</button>
    </div>
  );
}

export default UserProfile;

이렇게 수정하면, user 객체가 변경되었을 때만 컴포넌트가 렌더링되므로 불필요한 렌더링을 방지할 수 있습니다.

 

 

이번 리뷰에서는 React 성능 최적화 이슈 중 불필요한 렌더링을 방지하는 방법을 통해 어플리케이션의 성능을 향상시키는 방법을 알아보았습니다. 앞으로도 다양한 성능 최적화나 이슈 처리를 하여 사용자 경험을 크게 향상시키는 방법을 구상하겠습니다. 지속적인 관심 부탁드립니다.

---

코드 리뷰 문의 주세요.

함수 리뷰를 기본으로 합니다.

생각 못한 다양한 예외 상황이나

이상 코드 피드백 드립니다.

---