19. React.memo를 사용한 컴포넌트 리렌더링 방지

출처 - 벨로퍼트

https://react.vlpt.us/basic/19-React.memo.html

 

React.memo

: 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화

 

export default React.memo(UserList);

 

작성한 코드 기준으로 이야기해보자.

 

하지만, export한 컴포넌트를 React.memo로 감싸도 user의 이름을 클릭하면 user컴포넌트가 모두 리렌더링된다.

그 이유는 다음 코드에서 useCallback 함수에 users 가 디펜던시에 있기 때문에 users 값이 변경되었다 판단하여 렌더링을 하게된다.

 

const onRemove = useCallback(
  id => {
    // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
    // = user.id 가 id 인 것을 제거함
    setUsers(users.filter(user => user.id !== id));
  },
  [users]
);
const onToggle = useCallback(
  id => {
    setUsers(
      users.map(user =>
        user.id === id ? { ...user, active: !user.active } : user
      )
    );
  },
  [users]
);

 

useState의 함수형 업데이트를 하여 해결

setUsers(users => users.concat(user))

→ users에 최신 users값이 들어온다

 

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

→ nextProps.users와 prevProps.users가 같지 않을 때에만 리렌더링하겠다.