-
[React] useMemo Hooks 알아보기Front-end/React 2020. 11. 29. 23:51
useMemo
이전에 연산된 값을 재사용 할 때, 주로 성능을 최적화 할 때 사용합니다.
useMemo 선언하기
import React, { useMemo } from "react";
useMemo 사용하기
useMemo(function, dependencies);
function에는 실행할 함수를, dependencies에는 의존할 값을 나타냅니다. useEffect와 구성이 똑같습니다.
만약에 유저가 활성화 상태인 경우만 찾는다고 가정하겠습니다.function countActiveUsers(users) { console.log("활성 사용자 수 세는 중....."); return users.filter((user) => user.active).length; } const count = countActiveUsers(users);
위의 코드로 표현 될건데 이는 users값 뿐만 아니라 연관된 모든 상태가 변화하서 리렌더링 할 때마다 실행하게 됩니다.
하지만 단순히 숫자를 세는데 이런 일이 일어나는건 굉장히 성능적인 낭비입니다.function countActiveUsers(users) { console.log("활성 사용자 수 세는 중....."); return users.filter((user) => user.active).length; } const count = useMemo(() => countActiveUsers(users), [users]);
그래서 useMemo를 활용하여 이용자가 변화할 때만 의존값을 준다면 기타 변화에는 반응하지 않고 값을 가지고 있다가, 이용자의 변화만 감지하여 다시 숫자를 세게 됩니다.
'Front-end > React' 카테고리의 다른 글
[React] useReducer Hooks 알아보기 (0) 2020.11.29 [React] useCallback Hooks 알아보기 (0) 2020.11.29 [React] useRef Hooks 알아보기 (0) 2020.11.29 [React] Map 알아보기 (0) 2020.11.29 [React] Props 알아보기 (0) 2020.11.29