React Hook의 최적화

1. useCallback을 왜 사용할까 ?

• useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.

2. useCallback을 사용하는 사례 및 최적화

2.1 문제1]

문제점, 업데이트 될때마다 onIncrease 함수가 메모리에 계속 생성

import React from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  const [inputs, setInputs] = useState({
    username: "",
    email: "",
  });

  const onIncrease = () => setNumber(number + 1);

  return (
    <div>
      <span>{number}</span>
      <button onClick={onIncrease}>증가</button>
    </div>
  );
};

export default App;

2.2 문제2]

해결방법 : 이를 막기 위해 useCallback을 활용하여 특정 함수를 새로 만들지 않고 재사용 함

해결된점 : 재사용하므로 onIncrease를 이전에 메모리에 올라갔단걸 재사용하므로 함수가 생성되지 않음

문제점 : 이렇게 depth에 [] 을 입력하면은 메모리에 예전 함수가 올라가긴 하나 , 내가 onIncrease를 눌러서 숫자를 증가시키고 싶어도 이전의 메모리에 올라간 함수만을 사용하므로 계속 1만 찍힘 (number가 계속 1만 기억하므로)

import React from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  const [inputs, setInputs] = useState({
    username: "",
    email: "",
  });

  const onIncrease = useCallback(() => {
    setNumber(number + 1);
  }, []);

  return (
    <div>
      <span>{number}</span>
      <button onClick={onIncrease}>증가</button>
    </div>
  );
};

export default App;

2.2 문제3

해결방법 : []에 number를 넣어서 number가 바뀔때마다, onIncrease 함수를 동작하게 함

해결된점 : 숫자가 1씩 계속 증가함

문제점 : 그러나 이럴경우 onIncrease가 useCallback를 사용한 이유가 없음 (재활용해서 쓰는게 아니라 [number] 에 의해서 계속 생성된 onIncrease 함수를 사용하는거므로)

import React from "react";

const App = () => {
  const [number, setNumber] = useState(0);

  const onIncrease = useCallback(() => {
    setNumber(number + 1);
  }, [number]);

  return (
    <div>
      <span>{number}</span>
      <button onClick={onIncrease}>증가</button>
    </div>
  );
};

export default App;

2.2 문제4

해결방법 : 현재의 number를 가져와서 업데이트 시켜줌

해결된점 : useCallback이 최적화 됨, onIncrease 함수를 계속 생성하지 않고 재활용함, 숫자도 계속 증가

import React from "react";

const App = () => {
  const [number, setNumber] = useState(0);

  const onIncrease = useCallback(() => {
    //()안에 number은 현재의 number을 가리킴
    setNumber((number) => number + 1);
  }, []);

  return (
    <div>
      <span>{number}</span>
      <button onClick={onIncrease}>증가</button>
    </div>
  );
};

export default App;