React - useMemo

목록

• Introduction
• useMemo
• Conclusion

📌 Introduction

안녕하세요 이번 포스팅에서는 useMemo를 이용하여 이전에 연산 되었던 값을 기억하는 방법에 대해서 알아보겠습니다. useMemo는 주로 성능을 최적화할때 사용을 하게 됩니다.

📌 useMemo

일단 먼저 countActiveUser라는 함수를 한번 정의를 해보겠습니다.

function countActiveUsers(users) {
  console.log("활성 사용자 수를 세는중...");
  return users.filter((user) => user.active).length;
}

단순하게 user에서 active인 숫자만 걸러주는 함수입니다.

만약 이렇게 사용을 count의 숫자를 그대로 사용해줄 경우 component가 re render될때 마다 값을 재계산해주게 됩니다. 따라서 useMemo를 사용해서 이러한 현상을 해결 할 수 있습니다.

const count = useMemo(() => countActiveUsers(users), [users])

useMomo는 useEffect와 마찬가지로 첫번째 인자에는 함수가 들어가게 되어있고 두번째 인자로는 배열을 받게 됩니다. 그리고 그 배열안에 값이 변경이 될때만 실행을 하게 끔 되어있어요. 그래서 re render시에는 count의 연산중 users가 바뀌지 않는 한 연산을 다시 해주지는 않습니다.

📌 Conclusion

이렇게 react에서 최적화 방법을 useMemo를 사용해서 알아보았습니다. vue에서는 computed와 같은 기능을 하게 되는데 react쪽이 뭔가 조금더 자바스크립트 스럽지 않나 라는 생각을 하게 됩니다. 그럼 다음 포스팅에서 만나요 안녕~!