useCallback vs useMemo vs React.memo

[kamwoo]

useCallback, useMemo, React.memo

리액트 컴포넌트에서 성능을 최적화 하기 위해서 사용하는 방법

useCallback

: 첫 번째 인자로 콜백 함수를 전달받고, 두 번째 옵셔널 인자로 의존성 배열을 전달받는다.

const memoizedCallback = useCallback(() => { doSomething(a, b) },[a, b]);

메모이제이션된 콜백을 반환하며, 반한되는 콜백은 의존성이 변경되었을 때만 변경된다.

useMemo

: 첫 번째 인자로 생성 함수를 전달받고, 두 번째 옵셔널 인자로 의존성 배열을 전달받는다.

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

메모이제이션된 값을 반환하며, 반한되는 값은 의존성이 변경되었을 때만 변경된다.

useCallback과 useMemo는 매번 렌더링될 때마다 새로 함수를 생성하거나 값을 계산할 필요가 없을 때 메모리에 저장된 값을 가져와서 사용하게 되어 최적화할 수 있다.

React.memo

: 내장 고차 컴포넌트 타입으로, 컴포넌트 타입을 인수로 받고, 새롭게 래핑된 컴포넌트를 리턴된다. 래퍼 컴포넌트의 기본 동작은 props의 변경이 있는지 확인하고, 변경된 props가 없다면 다시 렌더링 하지 못하게 하는 것이다. shallow equality (얕은 비교)를 사용한다. 즉 서로 다른 객체에 있는 모든 개별 필드를 검사하여 객체의 내용이 같은지 다른지 확인한다. 다시말해, obj1.a === obj2.a && obj1.b === obj2.b && ........를 수행하는 것이다.

사용되는 상황들

1. 함수를 이펙트 안에 넣을 수 없는 경우가 있을 수 있다.

function SearchResults() {
  // 🔴 매번 랜더링마다 모든 이펙트를 다시 실행한다
  function getFetchUrl(query) {
    return 'https://hn.algolia.com/api/v1/search?query=' + query;
  }
  useEffect(() => {
    const url = getFetchUrl('react');
    // ... 데이터를 불러와서 무언가를 한다 ...
  }, [getFetchUrl]); // 🚧 Deps는 맞지만 너무 자주 바뀐다

  useEffect(() => {
    const url = getFetchUrl('redux');
    // ... 데이터를 불러와서 무언가를 한다 ...
  }, [getFetchUrl]); // 🚧 Deps는 맞지만 너무 자주 바뀐다

  // ...
}

두 이펙트 모두 매 랜더링마다 바뀌는 getFetchUrl 을 가지기 때문에 의존성 배열도 쓸모가 없다.

이럴 경우에 useCallback을 사용할 수 있다.

function SearchResults() {
  // ✅ 여기 정의된 deps가 같다면 항등성을 유지한다
  const getFetchUrl = useCallback((query) => {
    return 'https://hn.algolia.com/api/v1/search?query=' + query;
  }, []);  // ✅ 콜백의 deps는 OK
  useEffect(() => {
    const url = getFetchUrl('react');
    // ... 데이터를 불러와서 무언가를 한다 ...
  }, [getFetchUrl]); // ✅ 이펙트의 deps는 OK

  useEffect(() => {
    const url = getFetchUrl('redux');
    // ... 데이터를 불러와서 무언가를 한다 ...
  }, [getFetchUrl]); // ✅ 이펙트의 deps는 OK

  // ...
}

2. React.memo를 적용할 수 없는 경우 useCallback, useMemo를 사용할 수 있다.

   const MemoizedChildComponent = React.memo(ChildComponent)
   
   function Component() {
     const onClick = () => {
       console.log('Button clicked')
     }
   
     const data = { a: 1, b: 2 }
   
     return <MemoizedChildComponent onClick={onClick} data={data} />
   }

   Component가 렌더링 될 때 마다 onClick함수가 변하지 않았음에도 MemoizedChildComponent는 해당 props 가 새로운 참조로 변경되었음을 확인하고 다시 렌더링을 수행한다. 

   useCallback과 useMemo는 의존성의 변경이 일어나지 않았다면 동일한 참조를 유지하기 때문에 렌더링을 건너 띌 수 있다.

   useMemo를 사용해서 리액트 컴포넌트가 렌더링 결과물을 지난번과 정확히 동일한 참조를 반환히여, 해당 하위 컴포넌트를 렌더링하는 것을 건너 뛰게 할 수 있다.

   function OptimizedParent() {
     const [counter1, setCounter1] = useState(0)
     const [counter2, setCounter2] = useState(0)
   
     const memoizedElement = useMemo(() => {
       // counter2가 업데이트되도 같은 참조를 반환하므로, counter1이 변경되지 않는 한 같은 참조를 리턴할 것이다.
       return <ExpensiveChildComponent />
     }, [counter1])
   
     return (
       <div>
         <button onClick={() => setCounter1(counter1 + 1)}>
           Counter 1: {counter1}
         </button>
         <button onClick={() => setCounter1(counter2 + 1)}>
           Counter 2: {counter2}
         </button>
         {memoizedElement}
       </div>
     )
   }

[al-bur]

자기소개

[al-bur]

useCallback, useMemo, React.memo를 간단하게 설명해주세요

[al-bur]

memoization이 뭔지?

[al-bur]

useCallback, useMemo를 직접 사용해 본 적은?

[al-bur]

useCallback을 useState와 useEffect로 구현하려면 어떻게 하려나

[al-bur]

useMemo를 useState와 useEffect로 구현하려면 어떻게 할까?

[al-bur]

useMemo와 useCallback을 사용하지 않으면 렌더링 최적화가 발생하지 않는 이유는?

[al-bur]

클래스 컴포넌트에서는?

[greenblues1190]

클래스 컴포넌트의 생명주기를 설명해주세요.

[greenblues1190]

함수 컴포넌트의 생명주기?

[greenblues1190]

프로젝트에 함수 컴포넌트를 사용한 이유?

[al-bur]

useEffect를 나누는 패턴이 부작용이 있을 것 같은데, 어떤 순서로 실행될 건지를 결정할지 모르는 경우등이 있을텐데, useEffect를 합치는 게 좋지 않을까요?

[greenblues1190]

컴포넌트의 this state는 콜백 함수의 본문내에서도 값이 업데이트되기 때문에 좋은 거 아닌가요?

[greenblues1190]

useRef로 콜백 함수 내에서 상태값을 업데이트할 수 있는이유가 무엇인가요?

[al-bur]

어떻게 useRef를 사용하면 값을 유지하는지?

[greenblues1190]

직접 외부에 변수를 선언하지 않고 useRef를 사용하는 이유?

[al-bur]

리액트 성능 최적화를 해본 적이 있는지?

[al-bur]

리액트에서 렌더링이란?

[al-bur]

재조정이란?

[al-bur]

재조정 과정에서 useCallback이 어떠한 도움을 줄 수 있는지?