React - React.memo

목록

• Introduction
• React.memo
• Conclusion

📌 Introduction

안녕하세요. 이번 포스팅에서는 지난 시간에 언급 했었던 React.memo에 대해서 알아보겠습니다. 컴포넌트의 랜더링이 불필요할때 쓸수 있어요. 컴포넌트 리랜더링을 최적화 할수 있습니다. 한번 자세하게 알아볼게요.

📌 React.memo

사용 방법은 간단합니다.

export default를 해줄때 감싸주시면 되요.

export default React.memo(CreateUser);

혹은 이렇게도 가능해요.

// 이렇게 생긴 아이를
function User() {
  // ... 
}

// 이렇게 변경이 감싸줄수 있어요
const User = React.memo(function User(){
   // ...
});

이렇게 하면 컴포넌트가 바뀌었을때만 리랜더링이 됩니다. 또한 React.memo에서는 두번째 인자로 propsAreEqual을 받을 수 있어요. 만약 propsAreEqual에 true가 반환이 된다면 re rendering을 방지하고 false가 반환 된다면 re rendering을 해주게 되어있습니다. 코드로 한번 볼게요.

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

첫번째 인자로는 전의 props를 받아오게 되고 두번째 인자로는 다음 props를 받아옵니다. 그리고 users가 만약 전과 후가 일치 한다면 re rendering을 방지해줄수 있어요.

추가적으로 조금더 최적화를 시켜보자면 전 포스팅에서의 onToggle을 한번 살펴보겠습니다.

const onToggle = useCallback(
    (userId) => {
      setUsers(
        users.map((user) =>
          user.id === userId ? { ...user, active: !user.active } : user
        )
      );
    },
    [users]
  );

이렇게 생긴 아이를 setUsers에 dep를 지워줄수 있어요.

const onToggle = useCallback((userId) => {
    setUsers((users) =>
      users.map((user) =>
        user.id === userId ? { ...user, active: !user.active } : user
      )
    );
  }, []);

이렇게 해준다면 이제 deps가 없기 때문에 계속 재사용 가능하겠죠?

📌 Conclusion

이렇게 React.memo에 대해서 알아보았습니다. 앞선 2 포스팅도 최적화에 관한 내용이었지만 그중에 가장 성능을 최적화 시킬수 있습니다. 하지만 React.memo, useCallback, useMemo와 같은 것들을 남발하게 되면 오히려 코드를 많이 실행하는 결과가 나올수도 있어요. 그러니 꼭 필요한 순간에 최적화를 진행해주시면 좋을거 같아요. 그럼 다음 포스팅에서 만나요 안녕!