React.memo()
-
React는 먼저 컴포넌트를 랜더링한 뒤, 이전에 렌더링 된 결과와 비교하여 DOM 업데이트 결정
-
렌더링 결과가 이전과 다르다면 React는 DOM 업데이트 진행
-
컴포넌트가 React.memo()로 둘러 쌓여 있다면, React는 컴포넌트를 렌더링 하고 결과를 메모이징 함
-
그리고 다음 렌더링이 일어날 때, 렌더링하는 컴포넌트의 props가 같다면, React는 메모이징된 내용을 재사용함
메모이제이션
- 주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장
-
과정
-
처음 렌더링할 때 결과를 메모이징
-
다음 렌더링 시, props가 동일하므로 메모이징된 내용 재사용
-
-
React.memo() 지양해야 하는 상황
- 렌더링될 때 props가 다른 경우가 대부분인 컴포넌트
결론
- 렌더링 성능 최적화를 위해 컴포넌트 분리
- React.memo() 사용
useCallback
-
원래 컴포넌트가 렌더링될 때, 그 안에 있는 함수도 재 생성
-
하지만, 똑같은 함수를 컴포넌트가 리 렌더링 된다고 해서 계속 다시 만드는 것은 좋은 현상 아님
-
만약 함수가 자식 컴포넌트의 props로 전달 시, 함수가 재 생성될 때마다 자식 컴포넌트 리 렌더링
함수 생성
props로 함수 넘겨주기
텍스트 입력으로 컴포넌트 렌더링 확인
- 원래는 React.memo()로 감싸줘서 리 렌더링 시 되지 않던 컴포넌트들이 한 글자 입력 시마다 List 컴포넌트까지 다시 리 렌더링 되는 걸 볼 수 있음
useCallback()으로 문제 해결
useCallback은 메모이제이션된 함수를 반환하는 함수
- useCallback 적용은 useCallback 안에 콜백함수와 의존성 배열을 순서대로 넣기
-
함수 내에서 참조하는 state, props가 있다면 의존성 배열에 추가
-
useCallback으로 인해서 의존성 배열에 추가해준 state 혹은 props가 변하지 않는다면 함수는 새로 생성되지 않음
-
새로 생성되지 않기에 메모리에 새로 할당되지 않고 동일 참조값 사용
-
의존성 배열에 아무것도 없다면 컴포넌트가 최초 렌더링 시에만 함수가 생성, 그 이후에는 동일한 참조 값을 사용하는 함수
- 렌더링이 필요치 않은 List 컴포넌트가 없는 것 확인
useCallback()을 사용하기 좋은 때
-
자식 컴포넌트가 React.memo()로 최적화되어 있고
-
그 자식 컴포넌트에게 해당 함수를 props로 넘겨줄 때
useMemo
Memoization 이란?
비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술
useMemo 적용
- useMemo로 감싸준 후에 첫 번째 인수에 의존성 배열에 compute 함수에서 사용하는 값을 넣어줌
결론
-
useCallback()은 메모이제이션된 함수를 반환
-
useMemo()은 메모이제이션된 값 반환
