useMemo

useMemo는 memoization된 값을 반환하는 React의 hook입니다.
값을 반환하는 콜백과 의존성 array를 넘겨주는데, 의존성에 변화가 일어날 때마다 콜백이 실행되어 값을 다시 할당합니다.

이전에 사용된 값을 재사용하는 방식
주로 Component성능을 최적화할 때 사용한다

예를 들면 input에 값을 입력할 때, onChange이벤트를 발생시키면 input내부의 상태가 바뀌는데, 이때 리렌더링이 발생. 문제는 다른 바뀔 필요가 없는 것도 같이 바뀌어버림

이때, useMemo를 사용하게 되면 값이 바뀌지 않으면 리렌더링 시에 이전의 값을 다시 만들어내는게 아니라 재사용할 수 있게 만들어 준다.

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를 그대로 유저에게 보여준다.