React.memo *컴포넌트 성능 최적화

 

컴포넌트가 불필요하게 리렌더링이 된다면 앱의 성능을 떨어뜨리는 주 원인이 될 것이다.

따라서 컴포넌트의 리렌더링을 방지해주는 것이 필요한데, 그것이 바로 React.memo 함수 이다.

React.memo 함수는 컴포넌트 props가 바뀌지 않았다면 리렌더링을 방지해준다,

즉, 리렌더링이 필요한 상황에서만 컴포넌트가 리렌더링 될 것이다.

 

 

React.memo 사용법

 

1. React.memo( component )

 

- component : 불필요한 리렌더링 방지하고 싶은 컴포넌트

 

import React from 'react';

function CreateUser({ username, email, onChange, onCreate }) {
  return (
    <div>
     //코드 생략
    </div>
  );
}

export default React.memo(CreateUser);

export default React.memo(CreateUser);

 

: 리렌더링 방지하고 싶은 컴포넌트를 감싸준다.

 

const User = React.memo(function User({ user, onRemove, onToggle }) {
  return (
    <div>
    //코드 생략
    </div>
  );
})

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
    //코드 생략
    </div>
  );
}

export default React.memo(UserList);

 

const User = React.memo(function User({ user, onRemove, onToggle }) { ... }

 

: 한 컴포넌트 파일에 컴포넌트가 2개 이상이라면 변수를 사용해준다.

 원래 function User({ user, onRemove, onToggle }) { ... } 이랬던 코드를 

 변수 설정해주고 React.memo로 감싸줄 수도 있다.

 

 

2. React.memo( component , propsAreEqual ) 

 

- propsAreEqual : 특정 값들만 비교하는 함수

 

//코드 생략

export default React.memo(
  UserList,
  (prevProps, nextProps) => prevProps.users === nextProps.users
);

 

위와 같이 두 번째 파라미터에 users를 비교하는 함수를 넣어 리렌더링을 방지할 수도 있다.

하지만 이 경우 최신 users 배열을 참조하고 있는지 반드시 확인해야한다.

 

 

 

 

함수형 업데이트를 통해 성능 최적화

 

  //코드 생략
  
  const onToggle = useCallback(id => {
    setUsers(users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  }, []);
  
  //코드 생략

위 코드는 setUsers 인자로 업데이트할 새로운 값만 넣어준 코드이다.

따라서 useCallback을 사용할 때 deps로 users를 넣어 참조해야한다.

하지만 setUsers 인자에 값이 아니라 값을 업데이트하는 함수를 넣어준다면 users를 참조하지 않아도 된다.

 

  //코드 생략
  
  const onToggle = useCallback(id => {
    setUsers(users =>
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  }, []);
  
  //코드 생략

위 코드처럼 setUsers 인자에 함수형 업데이트를 해준다면 최신 값을 알아서 참조해오기 때문에,

useCallback의 두 번째 파라미터에 users를 참조하지 않아도 된다.

이렇게 코드를 수정하면 users를 참조하지 않기 때문에,

onToggle 함수가 실행되면 수정된 특정 항목만 리렌더링 될 것이다.