[useMemo] 값 줘.

useMemo

• Memo == Memoization
  • 동일한 값을 Return하는 함수를 반복적으로 호출해야할 때, 맨 처음 값을 memory에 저장해 필요할 때만 꺼내서 쓰는거!
  • 한번만 계산하면, 다시 계산할 필요 없이 그 값을 저장(캐싱)한 후 꺼내서 쓰기만 하면 된다!!

function Component() {
	const value = useMemo (
		()=> calculate(), []
	)

	return <div>{value}</div>
}

<Component />

요렇게 하면

렌더링 → Component 함수 호출 → Memoization → 렌더링 → Component 함수 호출 → Memoize 된 값을 재사용한다!

어떻게 쓰는데?

const value = useMemo(() => {
	return calculate(); // memoization해둘 값을 return해주는 콜백함수. useMemo가 리턴해줄 값
}, [item]); // 의존성배열, 배열 내부에 요소의 값이 update될 때만 콜백함수를 다시 호출하고, 다시 memoization 해주고 업데이트하고..

두 개의 인자를 받는다!

1. callback 함수
   • useMemo가 return해줄 값을 넣어준다!!
2. 배열
   • 이 안에 있는 값이 update될 때 useMemo의 값을 뱉어낸다!!

별코딩님의 React Hooks 시리즈를 보고 정리하기 위해 작성했습니다!!