31. Memoization

메모이제이션(Memoization)

여태까지 우리는 리렌더가 얼마나 많이 일어나든 신경쓰지 않고 프로그래밍을 해왔다. 이러한 것이 우리가 테스트를 하는 환경에서는 상관이 없을 수 있으나 만약 웹이 개발이 완료되서 배포됐다고 생각하면 열악한 환경에서는 이런 것이 사용자들에게 불편을 제공할 수 있다. 이를 해결하기 위해서 원하는 부분의 리랜더링을 막을 수 있는 방법이 useMemo와 useCallback이다.

 

useMemo()

변수의 리랜더링을 막는 함수로 변수와 의존성 배열을 받아서 그 배열 안의 값이 바뀔때만 랜더링되도록 만들 수 있다.

 

사용 예시

위의 random 값 aaa는 useMemo를 사용하여 다른 state가 setState로 바뀌어 리랜더링이 일어나도 random 값이 달라지지 않는다.

 

useMemo를 함수에도 적용시킨 예

useCallback()

useCallback은 useMemo의 함수 버전이라고 생각하면 된다. 

 

사용 예시