React | memoization

React

목차

1. React의 memoization
2. useMemo와 useCallback
3. React.Memo와 useMemo

1. React의 memoization

: 연산의 결괏값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때 재사용하는 기법

• React.memo()는 props의 값으로 변경을 확인함
• useCallback()과 useMemo()는 dependency 배열 내부의 값으로 변경사항을 확인함
  
  
• 리렌더링이 자주 일어나지 않는다면 굳이 사용할 필요가 없음(메모리에 불필요하게 남아있을 필요 없음)
• props나 state가 변경되는 경우가 대부분일 경우 굳이 비교 작업이 계속할 필요가 없기 때문에 사용X
• state나 props의 값이 어느 정도 적당히 변경되는 경우 사용해주면 좋음

2. useMemo와 useCallback

• useMemo

  • 함수의 리턴 값을 메모이제이션
  • 메모이즈된 값을 return하는 hook
  • 이전 값을 기억해두었다가 조건에 따라 재활용하여 성능을 최적화 하는 용도로 사용
  • 모든 함수를 useMemo로 감싸게 되면 이 또한 리소스 낭비가 될 수 있으므로, 퍼포먼스 최적화가 필요한 연상량이 많은 곳에 사용하는 것이 좋음
    
    

  • useMemo 사용법

    const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
    

    • a, b값이 변할 때만 첫번째 인자로 들어온 함수가 실행되어 재계산이 되고, 그렇지 않은 경우에는 메모이즈된 값을 return
      
      
    • 인자로 함수와 의존값(deps)을 넘겨 받음
    • 두번째 인자로 준 의존 인자 중에 하나라도 변경되면 값을 재계산 → 렌더시마다 소요되는 불필요한 계산을 피할 수 있음
    • 의존 인자로 아무것도 전달되지 않는다면 → 렌더시마다 항상 값을 새롭게 계산하여 return
      
      

• useCallback

  • 함수 자체를 메모이제이션
  • 리액트의 렌더링 성능을 위해서 제공되는 Hook
  • 자바스크립트에서 함수는 객체로 취급되기 때문에 리렌더링이 일어날 때마다 새로운 함수가 생성
  • 자식 컴포넌트의 불필요한 리렌더링을 막기 위해선 useCallback()으로 감싸줘야 함
  • 의존값(deps)에 들어있는 의존성 값이 변경되지 않는다면 이전에 생성한 함수의 참조 값을 반환해줌
    
    

  • useCallback 사용법

    const memoizedCallback = useCallback(함수, 배열);
    

    • 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줌
      
      

• useMemo와 useCallback의 차이

  • useMemo는 함수의 연산량이 많을 때 이전 결과값을 재사용하는 목적이고, useCallback은 함수가 재생성 되는 것을 방지하기 위한 목적
    

3. React.Memo와 useMemo의 차이

• React.Memo(= Higher-Order Components(HOC))

  • 컴포넌트 자체를 메모이제이션
  • 자체적으로 props값을 비교해서 달라진 부분이 없다면 리액트 DOM에서 비교 작업이 들어가지 않음
    
    

  • React.memo 사용법

    // 사용법1
    export default React.memo(component);
    
    // 사용법2
    const MyComponent = React.memo((props) => {
        return (/*컴포넌트 렌더링 코드*/)}
    );
    

    • shouldComponentUpdate를 내장하고 있어 낮은 복사를 실행하여 리렌더링을 방지함
    • props가 변경됐는지 아닌지만 체크함
    • 만약 React.memo에 감싸진 함수 컴포넌트가 함수 내부에서 useState나 useContext같은 훅을 사용하고 있다면, state나 context가 변경될 때마다 리렌더링됨
    • ‘같은 props로 렌더링이 자주일어나는 컴포넌트’,’렌더링에 리소스 소모가 큰 컴포넌트’에 사용
      * 불변성 고려 필요
      
      

• React.Memo와 useMemo의 차이

  • React.memo는 HOC, useMemo는 hook
  • React.memo는 HOC이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용 가능
    useMemo는 hook이기 때문에 오직 함수형 컴포넌트 안에서만 사용 가능

---

출처

메모이제이션 (memoization)
[React] 리액트에서의 메모이제이션 (react memoization)
메모이제이션이란?
React.memo와 useMemo 차이점
React Hooks: useCallback 사용법