React) useMemo & useCallback

useMemo

• 함수형 컴포넌트 내부에서 발생하는 연산 최적화에 사용
• useMemo를 이용해서 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하도록 설정
• 의존성이 변경되었을 때만(배열로 전달한 값이 변경되었을 때만) 메모이제이션된 값만 다시 계산해준다. (반환한다)

•       const colorMemo = useMemo(() => getColor(color), [color]);
      const movieGenreMemo = useMemo(() => getMovieGenre(movie), [movie]) ;

• 이 경우는, color값이 변경되면 getColor 함수만, movie값이 변경되면 getMovie함수만 호출된다.

useCallback

• 렌더링 성능을 최적화 해야하는 상황에서 사용 ~> 이벤트 핸들러 함수를 필요한 상황에서만 생성

• 렌더링이 될 때마다 함수를 생성하는 것 (재선언됨) 은 비효율적이기 때문에,
  마운트 될 때만 선언하고 재사용하기 위해 사용

• 메모이제이션된 콜백을 반환

• 의존성이 변경될 때(두 번째 파라메터인 배열 값이 변경될 때) 메모이제이션된 콜백 함수가 재선언된다.
  (반환된다)

• 자식(하위) 컴포넌트가 불필요한 랜더링을 방지하기 위해, 참조 동일성(reference equality === 주소 비교 === 얕은 동등 비교)에 의존적인 최적화된 자식 컴포넌트에 콜백을 전달할 때 유용

• props와 state의 구조가 간단하다면, 컴포넌트에 대해 얕은 비교를 수행하는 sholudComponentUpdate를 활용하여 최적화가 가능 (만약, deep한 자료 구조의 변화가 있다면 forceUpdate를 사용해야 한다)

  • shouldComponentUpdate는 React.PureComponent를 상속받아서 사용할 수 있고, 직접 작성할 수도 있음
  • shouldComponentUpdate가 false를 반환하면해당 컴포넌트와 자식 컴포넌트에서 render()를 호출하는 것과 전체 렌더링 프로세스를 건너뛸 수 있음
  • 자식 컴포넌트가 순수한지(순수 함수) 여부에 따라 조심히 사용해야함

• 위의 말을 다른 말로 하면, 참조 동일성(reference equality)에 의존하는 경우, 상위 컴포넌트에서 callback 함수를 props로 넘기 때, useCallback을 통해 콜백 함수를 메모이제이션하는 것이 유용하다는 의미

  • 함수가 재선언되면 하위 컴포넌트에서 넘겨 받는 함수가 달라졌다고 인식하기 때문에

• React.memo()로 함수형 컴포넌트 자체를 감싸면(하위 컴포넌트를 감싸면), 넘겨받는 props가 변경되지 않았을 때는 상위 컴포넌트가 메모이제이션된 함수형 컴포넌트(이전에 렌더링된 결과)를 사용함

  • 함수형 컴포넌트가 React.memo()로 래핑되면, React는 컴퍼넌트를 렌더링하고 결과를 메모이제이션한다. 다음 렌더링이 일어나기 전 까지 props가 같은 경우, 메모이징된 내용을 재사용함

  •       // 첫 렌더이다. React는 MemoizedMovie 함수를 호출한다.
        <MemoizedMovie
          movieTitle="Heat"
          releaseDate="December 15, 1995"
        />
    
        // 다시 렌더링 할 때 React는 MemoizedMovie 함수를 호출하지 않는다.
        // 리렌더링을 막는다.
        <MemoizedMovie
          movieTitle="Heat"
          releaseDate="December 15, 1995"
        />

---

3줄 요약

• useMemo는 특정 값을 메모이제이션해서 함수 실행을 최소화 할 때, 그리고 이 함수 실행을 통해 리턴 값을 받아야 할 때 사용한다.
• useCallback은 특정 콜백 함수를 메모이제이션해서 함수 재선언을 최소화할 때, 그리고 리턴되는 콜백 함수가 필요할 때 사용한다.
• 둘 다, 두 번째 파라메터로 의존성을 부여한 값이 변경될 때 실행된다.

참고

https://leehwarang.github.io/2020/05/02/useMemo&useCallback.html

https://ko.reactjs.org/docs/hooks-reference.html#usecallback

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

https://ko.reactjs.org/docs/optimizing-performance.html

https://ko.reactjs.org/docs/react-api.html#reactpurecomponent