[React]useMemo, useCallback

메모이제이션(memoization)  이란?⭐

---

 

• 프로그래밍에서 반복되는 결과를 메모리에 저장 해놓고 다음에 같은 결과가 나올 때 다시 계산할 필요없이 빨리 실행 하는 기법이다.
• JavaScript에서는 클로저 를 통해 계속 유지되는 저장공간을 만들 수 있다.
• 두 hooks 는 메모이제이션을 이용한 방법으로 불필요한 렌더링을 막을 수 있으나, 사용 자체로도 프로그램에 사용량이 채워지므로 사용하기 전 신중히 생각 해 봐야한다.

 

useMemo 사용법 📄

---

const memo = useMemo(() => {
	return blabla;
},[list])

• useMemo는 첫번째 인자로 콜백 함수를 두번째 인자로 의존성(dependency) 배열을 받는다.
• useMemo는 list가 변한다면 콜백 함수를 실행하고 blabla를 리턴하게 된다.
• useMemo는 주로 Value같은 데이터 값을 메모이제이션 할때 사용한다.

 

useCallback 사용법 📞

---

// 컴포넌트 내에 함수를 선언 시 컴포넌트가 렌더링 될때마다 새로운 함수 생성
const add = () => x + y;

// useCallback을 이용하면 컴포넌트가 렌더링 되더라도 의존성 값이 변경되지 않는 한 기존 함수를 반환
const add = useCallback(() => x + y, [x, y]);

• useCallback은 첫번째 인자로 콜백 함수를 두번째 인자로 의존성(dependency) 배열을 받는다.
• useCallback은 함수를 메모이제이션 하기 위해 사용되는 hook 이다.