메모이제이션 hook인 useMemo와 useCallback에 대해서 알아보자

useMemo

메모이제이션된 값을 반환

• 언제 사용하나요?
  -> 특정 값이 변할 경우에만 연산을 실행할 수 있도록 useMemo를 사용해 특정 변수에 의존하도록 등록해요.

import React, { useState, useMemo } from "react";

export default function App() {
  const [countOne, setCountOne] = useState(0);
  const [countTwo, setCountTwo] = useState(0);

  console.log(countOne); 
  
  return (
    <>
      <button onClick={() => setCountOne(cur => cur + 1)}>one</button>
      <button onClick={() => setCountTwo(cur => cur + 1)}>two</button>
    </>
  );
}

-> 위 상황을 가정해보면, console.log(countOne);은 상태가 바뀌면 리렌더링되는 컴포넌트 리렌더링 조건 때문에 버튼 one을 클릭할때 뿐만 아니라 버튼 two를 클릭할때도 실행된다.

useMemo 사용

import React, { useState, useMemo } from "react";

export default function App() {
  const [countOne, setCountOne] = useState(0);
  const [countTwo, setCountTwo] = useState(0);

  // useMemo 사용하기
  useMemo(() => {console.log(countOne)}, [countOne]);
  
  return (
    <>
      <button onClick={() => setCountOne(cur => cur + 1)}>one</button>
      <button onClick={() => setCountTwo(cur => cur + 1)}>two</button>
    </>
  );
}

useCallback

메모이제이션된 함수를 반환

• 언제 사용하나요?
  1) 자식 컴포넌트에 props로 함수를 전달할 경우
  2) 외부에서 값을 가져오는 api를 호출하는 경우

import React, { useState } from 'react';
import Info from './Info';

export default const App = () => {
  const [address, setAddress] = useState('');
  const onSave = () => {};

  return (
    <div className="App">
      <input
        type="text"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />
      <Info onSave={onSave} /> // Info 컴포넌트 리렌더링 발생
    </div>
  );
}

onChange 함수로 address가 변경되어 리렌더링이 발생하면 onSave함수가 새로 만들어지고, Info 컴포넌트의 props로 onSave함수가 새로 전달된다.

이때 Info 컴포넌트에서 이전 onSave와 이후 onSave가 다른 함수가 되어버리기 때문에 리렌더링이 일어난다.

useCallback 사용

import React, { useState, useCallback } from 'react';
import Info from './Info';

export default const App = () => {
  const [address, setAddress] = useState('');
  const onSave = useCallback(() => {}, [address]);

  return (
    <div className="App">
      <input
        type="text"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />
      <Info onSave={onSave} /> // Info 컴포넌트 리렌더링 방지
    </div>
  );
}

(추가) React.memo

컴포넌트 자체를 메모이제이션하는 방법

컴포넌트 리렌더링 조건

1. 자신의 상태가 변했을때
2. 부모 컴포넌트로부터 받은 props가 변했을때
3. 부모 컴포넌트가 리렌더링될때 -> React.memo는 요경우에 최적화

즉, 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트는 리렌더링하지 않음.