useMemo
useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산최적화 가능
지금 위에 사진을 보면, 숫자를 등록할 때 뿐만 아니라, input에 onChange이벤트가 발생할때마다도 함수호출이 일어나는 것을 볼 수 있다. 평균값을 계산하는데 인풋내용이 바뀔때마다 계산할 필요가 없으니 낭비가 되고 있는 것이다.
이것을 특정 값이 바뀌었을 때만 연산을 실행하여 최적화를 할 때 사용하는게 useMemo이다.
useMemo에 list가 바뀔때마다 연산을 실행하도록 코드를 넣었다.
useCallback
useCallback도 useMemo와 마찬가지로 최적화를 위해서 사용한다. useCallback는 주로 렌더링 선능을 최적화해야 하는 상황에서 사용한다.
보통 컴포넌트에서 사용된 함수들은 리렌더링이 되는 순간 새로 만들어진 함수를 사용하게 된다.
대부분은 상관없지만, 렌더링이 자주 발생하거나 렌더링 해야 할 컴포넌트의 개수가 많아지면 이부분을 최적화 해주는 것이 좋다
함수에 useCallback을 적용시켜 최적화를 진행하였다.
useCallback는 첫 번째 파라미터로 사용할 함수를 넣고, 두 번째 파라미터로는 배열을 넣는데 이 배열이 어떤 값이 바뀌었을때 함수를 재생성할지를 말한다.
이 경우에는 onInsert는 기존의 number와 list를 조회해 nextList를 생성하기 때문에 배열안에 두가지를 다 넣어줘야 한다.
그럼 이 둘의 차이점이 뭐야?
useCallback는 함수를 반환한다, useMemo는 상태 값을 반환한다. 이거말고는 차이점이 거의 없는것 같다.
