React.memo() 란?
UI 성능을 증가시키기 위해, React는 고차 컴포넌트(Higher Order Component, HOC)React.memo()를 제공한다. 렌더링 결과를 메모이징(Memoizing)함으로써, 불필요한 리렌더링을 건너뛴다.
컴포넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모이징한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징된 내용을 재사용한다.
여기서 가장 중요한 것이 바로 방금 나왔던 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징된 내용을 재사용한다 라는 부분이다.
즉 메모이징 한 결과를 재사용 함으로써, React에서 리렌더링을 할 때 가상 DOM에서 달라진 부분을 확인하지 않아 성능상의 이점을 누릴 수 있다.
React.memo() 와 콜백 함수
우리는 함수의 동등성이란 함정 때문에, 메모이제이션을 적용할 때는 콜백을 받는 컴포넌트 관리에 주의해야한다. 리렌더를 할 때 마다 부모 함수가 다른 콜백 함수의 인스턴스를 넘길 가능성이 있다.
즉 동일한 props 값을 전달하더라도 새로운 콜백 때문에 리렌더링을 하게 되는 경우가 발생하는 것이다. 이러한 문제를 해결하기 위해 새로운 콜백이 발생하지 않게 useCallback()을 사용해서 콜백 인스턴스를 보존시켜준다.
이러한 이유로 React.memo() 함수를 사용하는 것이 효과적이라고 판단할 때 콜백 함수에도 신경을 써야 한다.
React.memo() = useMemo ?
React.memo()를 찾아보면 useMemo도 있다는 것을 알게 된다. 그러면 useMemo는 React.memo()와 같을까?
정답은 아니다. 종류가 다르다.
useMemo는 메모이즈된 값을 return하는 hook이다. 인자로 함수와 의존 값(dependencies)을 받는다. useMemo는 두번째 인자로 준 의존 인자 중에 하나라도 변경되면 값을 재 계산한다. 이를 통해 매 렌더시마다 소요되는 불필요한 계산을 피할 수 있다. 만약 dependencies 인자로 아무것도 전달되지 않는다면, 렌더시마다 항상 값을 새롭게 계산하여 return한다.
이러한 useMemo는 hook이고 React.memo()는 HOC으로 다른 종류이다.
하지만 공통점도 존재한다. React.memo와 useMemo 모두 이전 props와 동일하면 인자로 넘긴 함수는 재실행되지 않고, 이전의 메모이즈된 결과를 반환한다는 점에서 동일하게 동작한다.
