useMemo()란?

useMemo를 사용한 연산한 값 재사용 하기.

이번에는 성능 최적화를 위해 연산된 값을 useMoeo 라는 Hook 을 사용하여 재사용 하는 방법을 알아보겠습니다.

어떠한 상태에 변화가 있을때만 연산해야하는 계산 값들은 따로 설정해주지 않으면

컴포넌트가 리렌더링 될 때마다 계속 같이 실행됩니다.

이런 상황에서는 useMemo 라는 Hook 함수를 사용하면 성능을 최적화 할 수 있습니다.

Memo 는 "memoized" 를 의미합니다.

이전에 계사 한 값을 재사용한다는 의미를 갖고 있습니다.

useMemo() 사용

• 첫 번째 파라미터 : 어떻게 연산을 할지 정의하는 함수

• 두 번째 파라미터 : deps 배열을 넣어준다.

(단, 이 배열 안에 넣은 내용이 바뀌면, 등록한 함수를 호출해서 값을 연산해주고 내용이 바 뀌지 않는다면 이전에 연산한 값을 재사용 합니다.)

 

 

on countActiveUsers(users) {
   console.log("활성 사용자 수를 세는중 . . .")
   
   //true인것만 통과
   //반환 값 : 객체
   //즉, true이면 객체로 반환. 그것의 길이를 구함
   return users.filter(user => user.active).length;
​
}
​
 //이전
   //const count = countActiveUsers(users);  
   //성능 최적화 useMemo 사용 후  
   const count = useMemo(() => countActiveUsers(users), [users]);