이전에 사용된 값을 재사용하는 방식
주로 Component
성능을 최적화할때 사용
예를 들면 input
에 값을 입력할 때, onChange
이벤트를 발생시키면 input 내부의 상태가 바뀌는데, 이때 리렌더링이 발생한다. 문제는 다른 바뀔 필요가 없는 것도 같이 바뀌어버린다.
이때, useMemo
를 사용하게 되면 값이 바뀌지 않으면 리렌더링 시에 이전의 값을 다시 만들어내게 아니라 재사용할 수 있게 만들어 줌
import { useMemo } from 'react';
//import 문은 위와 같다.
useMemo(() => {A}, [B])
첫번째 파라미터는 함수여야 한다. 두번째 파라미터는 어떤 값을 기준으로 삼을건지인데, [B]안의 값인 B가 바뀔 경우, 이전의 값을 재사용하는게 아니라 리렌더 시 새롭게 값을 만들어 낸다.
예를 들면, user에 active라는 props가 있다고 가정하고, 몇 개의 유저가 active를 true 값을 갖는지 계산하는 함수를 만들어보자.
const countActiveUser(users){
console.log("counting active users...");
return users.filter(user => user.active).length;
}
이렇게 선언된 걸 다음처럼 변수를 통해 값을 가져와서 component
에 출력하도록 선언하자.
const count = countActiveUser(users);
return (<div>active users: {count}</div>);
어떤 input 창과 같이 있고, input창이 onChange가 될시에도, App.js
이 계속해서 리렌더링이 되고, 그 결과 console.log("counting active users...");
이 부분이 자꾸 출력된다.
이것을 방지해주기 위해 useMemo
를 사용한다.
const count = useMemo(() => countActiveUser(users), [users]);
return(<div>active users: {count}</div>);
이렇게 코드를 작성하면, onChange
때문에 리렌더링이 발생해도 users의 값은 변경되지 않았기 때문에 새 값을 렌러딩하지 않고 그 전의 count를 그대로 유저에게 보여준다.