[React] useMemo useCallback

useMemo 를 사용하면 함수 컴포넌트 내부에서 발생하는 연산 최적화 가능

 

렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식.

 

 

useCallback 은 useMemo 와 비슷한 함수.

주로 렌더링 성능을 최적화해야 하는 상황에서 사용. 이 Hook을 사용하면 만들어 놨던 함수를 재사용 가능하다.

 

useCallback 의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 된다.

이 배열에는 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다.

함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터 안에 포함시켜 주어야 한다.

 

 

 

 

추가 내용 [2022.11.08]

 

useMemo를 이용하여 함수를 한 번만 실행하여 결과 값을 유지하여 불러다가 쓰고 싶었다.

활용법을 제대로 이해한 것 같지 않아, 다시 찾아보았다.

 

 

useMemo를 사용하기 전에, 메모이제이션(memoization)이란?

기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.

(지금 내가 원하는 기법.)

memoization을 적절히 적용하면 중복 연산을 피할 수 있어, 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다.

 

 

useMemo

메모이제이션된 '값'을 반환한다.

useMemo(() => fn, deps)

 

useMemo 는 deps가 변한다면, () => fn 이라는 함수를 실행하고,

그 함수의 변환 값을 반환한다.

 

deps : dependency ( useMemo가 deps라는 것에 '의존' 한다는 뜻. )

 

useMemo(() => {console.log(ex)}, [ex])

 

 

에서 deps는 [ex]이다.

ex가 변할 때에만 () => {console.log(ex)} 이 실행된다.

ex 라는 값은 변하지 않으면 useMemo는 아무런 변화가 없다.

 

 

 

 

---

참고 : 리액트를 다루는 기술 개정판 (김민준 지음)

 

https://basemenks.tistory.com/238

useCallback 과 useMemo 의 차이