Memoization

최적화는 함수형 컴포넌트에서 가장 중요하게 다루어지는 부분이다.

함수를 호출하면 함수 내부의 변수, 함수등은 모두 호출 될 때마다 새로 할당하게 된다. 재활용되는 값이라면 무조건 호출할 필요는 없을 것이다.

Memoization이란, 수행했던 연산 결과들을 한곳에 저장한 후 동일한 입력값인 경우 재활용 하는것이다.

Memoization을 도와주는 Hook은 어떤것들이 있을까?

1. useMemo
   첫번째 인자 : 기억할 값을 리턴해주는 함수
   두번째 인자 : dependency array

export const ComponentA = (props) => {
  const variableA = useMemo(() => {}, [])
}

2. useCallback
   첫번째 인자 : 기억할 함수를 리턴해주는 함수
   두번째 인자 : dependency array

export const ComponentA = (props) => {
  const variableA = useCallback(() => {}, [])
}

앱이 최초의 설계보다 커지게되고 함수형 컴포넌트가 비대해지게 되면 메모리가 많이 늘게되고, 앱이 강제로 종료되는 경험이 있을수도 있다.

항상 값을 생성하게 되고 앱사용이 길어지면 발생하는 문제들이 있는데, Memoization을 통해 이런 오류들을 예방할 수 있다.