useMemo

useMemo 를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.

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

useCallback

useCallback은 useMemo와 비슷한 함수이다. 주로 렌더링 성능을 최적화 해야 할때 사용된다. 이 Hook은 만들어 놨던 함수를 재사용 할 수 있다.

useMemo에서 구현한 Average컴포넌트에서 hanldeChange와 handleInsert 함수들은 컴포넌트가 다시 렌더될 때 마다 새로 만들어진 함수를 사용하게 된다. 이방식이 문제가 있는건 아니지만, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 최적화 해주는 것이 효율적이다.

문법

• 첫번째 파라미터 : 생성하고 싶은 함수
• 두번째 파라미터 : 배열 (어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야 한다)

두번째 파라미터 => []

배열이 비어있을경우 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용하게 되며, 배열안에 값이 있으면 해당 값들이 변경될 때 새로 만ㄷ르어진 함수를 사용하게 된다.

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