[React] 최적화(1) - useMemo

메모이제이션을 이용한 최적화 방법에 대해 알아보자.

보통 알고리즘 공부할 때 배우는 건데 리액트에서 최적화 문제를 해결할 때도 사용된다고 한다.
메모이제이션에 대해선 이미 알고 있으니 어떻게 사용되는지만 알아보자.

리액트 자체적으로 지원하는 훅 기능을 이용하는데 useMemo를 불러온 후 최적화가 필요한 때에 적절히 이용하기만 하면 된다.

아래 예시를 보자.

 

1    import React, {useMemo, useEffect, useState} from "react";
2   
3    const [data, setData] = useState([]);
4
5    const getApiRef = async()=>{
6     const res = await fetch("https://small-pond.tistory.com").then((res)=>
7     res.json());
8
9     const Init = res.slice(0,3).map((it)=>{
10     return{
11     	Example1: it.undefined,
12     	Example2: it.undefined,
13     	Example3: it.undefined
14      }
15     });
16     
17     setData(Init);
18    };
19    
20    const useEffect(()=>{getApiRef(); console.log("Mount!");},[]);
21    
22    const getStatus = useMemo(()=>{
23     // Complexible Calc...
24    },[data.length]);
25    
26    const {Example1, Example2, Example3} = getStatus;

라이프 사이클을 관리하는 useEffect가 호출되면서 getApiRef를 실행하고 API 호출 함수인 fetch가 완료될 때까지 대기한다.

비동기 함수가 완료되면 다시 Init에서 전달된 Promise 객체를 분해하여 일부만 가져오는데, 실제론 값이 없기 때문에 객체를 리턴하는 흉내만 내었다.

이후 setData로 상태 변화를 알리며 data의 길이(개수)에 변화가 있다면 getStatus에서 현재 상태에 대해 뭔가를 연산하게 될 것이다.

여기서 getStatus가 실행되는 시점이 중요한데 만약 useMemo를 사용하지 않는다면 화면이 생성되기 전과 생성된 후, 수정되거나 새로고침 되었을 때 등등 데이터에 변화가 없더라도 여러 번 실행될 것이다.

물론 사이클을 관리하는 useEffect를 조정하면 상관없겠지만 임의로 가정한 것이니 그냥 넘어가자.

여기서 사용된 useMemo는 리액트 자체에서 제공하는 클래스 훅 중 하나인데 예시에선 첫 번째 인수로 전달 된 콜백함수를 두 번째 인수로 전달한 값에 변화가 있을 때만 실행한다.

예시에선 두 번째 인수로 전달한 값이 단순히 data의 길이이기 때문에 객체가 추가/삭제되었을 때만 실행 될 것이다.

꼭 필요한 경우를 제외하고 쓸데없는 연산을 하는 함수가 있다면 위와 같이 리액트에서 제공하는 훅 기능을 적극적으로 활용해보자.