함수 최적화

원래 컴포넌트가 렌더링 시 그 안에 있는 함수도 재 생성

but 똑같은 함수를 다시 만드는 것은 좋은 현상이 아님

특히, 자식 컴포넌트에 props로 내려 준다면 함수를 포함하고 있는 컴포넌트가 리 렌더링 될 때마다 자식 컴포넌트도 새롭게 재 생성되는 악영향 발생

=> 컴포넌트를 재렌더링하지 않고 마지막으로 렌더링된 결과를 재사용

컴포넌트가 props로 동일한 결과를 렌더링하면, React.memo를 호출하고 결과를 메모이징(Memoizaing) 하도록 래핑하여 경우에 따라 성능 향상

props 변화에만 영향

Memoization?

: 비용이 많이 드는 함수 호출의 결과를 저장하고, 동일 입력이 다시 발생 시 캐시된 결과를 반환해 컴퓨터 프로그램 속도를 높이는데 주로 사용되는 최적화 기술

컴포넌트 내 compute 함수가 복잡한 연산 수행하면 결과 값을 리턴하는데 오랜 시간 소요

이럴 시 컴포넌트가 계속 리렌더링 된다면 연산 수행하는데 오랜 시간으로 성능에 안 좋은 영향을 미치고, UI 지연 현상 발생

=> 이것을 해결하는 것이 useMemo, useCallback

compute 함수에 넘겨주는 a, b의 값이 이전과 동일하다면 컴포넌트가 리 렌더링 되더라도 연산 다시 하지 않고, 이전 렌더링 때 저장해두었던 값을 재활용

이렇게 함수에 useMemo롤 감싸주면 해결이 된다

콜백함수와 의존성 배열을 순서대로 넣어준다

---

useMemo

전체 App 컴포넌트에 포함되는 Lists, List, Form 컴포넌트에 콘솔 찍도록 소스 코드 작성

Form 컴포넌트 속 input에 값 입력

한 글자 입력 시 마다 props가 바뀌지 않아서 렌더링 하지 않아도 되는 Lists 컴포넌트와 List 컴포넌트까지 다시 렌더링 되는걸 확인

props에 결과적으로 영향오는 컴포넌트에만 memo로 감싸면

굳이 렌더링 될 필요 없는 Lists, List 컴포넌트는 더이상 렌더링 되지 않는 것을 확인

useCallback

useCallback은 useMemo와 동일하게 콜백함수와 의존성 배열을 순서대로 넣으면 된다

함수 내 참조하는 state, props가 있다면 의존성 배열에 추가

useCallback으로 todoData가 변하지 않는다면 함수 재생성 안함

새로 할당하지 않고, 동일 참조 값 사용