useMemo hook?

이전에 사용된 값을 재사용하는 방식
주로 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를 그대로 유저에게 보여줌