(React) 리엑트 최적화 : useMemo

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