React.js | 입문 | React.memo

이전에 useMemo와 useCallback이란 함수를 리렌더링 관리의 중요성과 함께 설명했었다.

바로 컴포넌트에 적용을 해보겠다.

 

UserList.js

import React from 'react';

const User = React.memo(function User({ user, onRemove, onToggle }) {
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
});

function UserList({ users, onRemove, onToggle }) {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default React.memo(UserList);

위 코드를 보면 User를 React.memo에 감싸는 방식과

export default를 할 UserList를 React.memo에 감싸서 보내는 방식을 볼 수 있다.

 

한 마디로 그냥 감싸주면 된다.

 

추가적으로, React.memo 에서 두번째 파라미터에 propsAreEqual 이라는 함수를 사용하여 특정 값들만 비교를 하는 것도 가능하다. 하지만 잘못 사용하면 의도치 않은 버그가 발생하니 주의하자!

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