개념 - useMemo

useMemo

특정 값(value)를 재사용하고자 할 때 사용하는 Hook이다.

이미 계산해 본 연산 결과를 기억해두었다가 동일한 계산을 시키면 다시 연산하지 않고 기억해두었던 데이터를 반환 시키게 하는 방법이다

마치 시험을 볼 때 이미 풀어본 문제는 다시 풀어보지 않아도 답을 알고 있는 것과 유사한 것 이다.

이런 상황을 Memoization을 이용해 연산 과정을 최적화 했다고 볼 수 있다.

예시) 문제 A라는 문제를 해결하고 답을 기억한다. 이후에 문제 A를 똑같이 만난다면 기억해 두었던 답을 다시 적는다

사용방법

함수가 하나 있다

data = [1,2,3,4]
const good = () => {
  const number = data.map (it) => it * 2	// map을 이용해 it의 요소 하나하나에 2를 곱해줌
  return number
}
	

const happy = good()	// map을 이용한 결과를 happy에 넣어줌

그런데 다른 함수를 건드릴 때 마다 그와 관계없는 good 함수가 계속 리렌더링된다. 그러면 계속 data에 map을 새롭게 돌려 메모리가 낭비된다. 이럴때 useMemo를 사용해서 good에 들어가 있는 data가 변할때에만 return 값을 바꾼다. 만약 data가 바뀌지 않으면 number의 map 연산을 실행하지 않고 return값이 처음 계산한 값으로 바로 나온다.

memo를 사용한 결과를 보자

data = [1,2,3,4]
const good = useMemo(() => {	//useMemo 사용, useMemo로 전체적으로 감싸준다
  const number = data.map (it) => it * 2	
  return number
},[data.length]) // data의 길이가 바뀔때에만 useMemo안의 함수를 실행한다.
	

const happy = good	
// useMemo의 결과값을 함수가 아니라 마지막에 적용된 return값이 나오므로 ()를 써서 함수 실행을 시키면 안된다.