[react] 최적화 - React.memo() & useMemo() & useCallback()

React는 먼저 컴포넌트를 렌더링(rendering) 한 뒤, 이전에 렌더링 된 결과와 비교하여 DOM 업데이트를 결정한다. 만약 렌더링 결과가 이전과 다르다면, React는 DOM을 업데이트한다. 다음 렌더링 결과와 이전 결과의 비교는 빠르다. 하지만 어떤 상황에서는 이 과정의 속도를 좀 더 높일 수 있다.

 

React.memo : 컴포넌트의 결과 값을 memoized하여 불필요한 re-rendering을 관리

컴포넌트가 React.memo()로 래핑 되면 React는 컴포넌트를 렌더링 하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.

React.memo(component, compFunc)

React.memo()는 props 혹은 props의 객체를 비교할 때 얕은(shallow) 비교를 한다. 비교 방식을 수정하고 싶다면 React.memo() 두 번째 매개변수로 비교함수를 만들어 넘겨주면 된다. 속성값 비교 함수에서 true를 반환하면 이후 단계를 생략하고 이전 렌더링 결과를 재사용한다. 

callback 함수는 리렌더링 될 때마다 새로운 참조값을 갖게 된다(리렌더링시 함수 재생성되어 이전에 만들어진 함수와 다른 주소에 저장되기 때문에 재생성된 함수는 이전 것과 다름). 따라서 props로 함수(또는 객체, 배열과 같은 참조타입)를 전달받을 경우 함수의 내용은 같더라도 참조값이 다르다면 리렌더링이 발생하기 때문에 얕은 비교를 진행하는 React.memo는 오히려 memoization에 쓸데없는 메모리만 낭비한다. 이 때 useCallback을 사용하면 이를 방지할 수 있다.

# 언제 사용하면 좋을까?!

함수형 컴포넌트가 같은 props로 자주 렌더링 될 거라 예상될 때 사용하면 최적화에 도움을 줄 수 있다.

 

useMemo : 함수의 결과 값을 memoized 하여 불필요한 연산을 관리

함수 호출 이후의 return 값이 memoized 되며 두 번째 파라미터인 종속성 배열 안에 있는 요소가 변경될 때마다 첫 번째 파라미터인 callback 함수를 다시 생성한다. 배열에 아무것도 없을 경우 재생성되지 않는다.

const 변수명 = useMemo(function, [deps])

• 첫 번째 인자 : 계산된 값을 return 하는 callback 함수
• 두 번째 인자 : 검사할 특정 값을 담은 종속성 배열, 하나라도 변경되면 재계산

 

useCallback : 함수를 저장하여 함수 재사용

useMemo가 특정 값을 재사용하기 위해 사용하는 반면, useCallback은 특정 함수를 재사용하기 위해 사용한다. useMemo와 마찬가지로 두번째 인자로 의존값을 가진다 (검사할 특정 값을 담은 배열).

함수가 새로 만들어진 다음, 조건(deps)에 따라 새로 생성한 함수를 무시하고 기존에 캐싱된 함수를 선택할지, 캐싱된 함수를 버리고 새로 생성한 함수를 선택할지 결정된다.

# 언제 사용하면 좋을까?!

자식 컴포넌트가 React.memo()로 래핑 되어 최적화되어 있다면 해당 자식 컴포넌트에게 props로 함수를 전달할 시, 부모 컴포넌트에서 useCallback으로 함수를 선언하면 최적화에 도움이 될 수 있다(자식 컴포넌트 불필요한 리렌더링 방지).

 

참고한 블로그)

https://ui.toast.com/weekly-pick/ko_20190731

https://velog.io/@khxxjxx/React-2.-Shop4#memo