React - useCallback

useCallback 은 useMemo와 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하게 되는데, 이 Hook 을 사용하면 만들어놨던 함수를 재 사용 할 수 있다.

 

이게 무슨 의미나면.. 내가 제대로 이해를 한 지 모르겠는데 보통 우리가 일반적으로 생성하는 함수는, 컴포넌트가 렌더링 될 때마다 새롭게 다시 생성된다고한다. 즉 똑같은 기능을 하지만 다시 렌더링 할때마다 이 함수가 새롭게 다시 생성된다는것. 예를들어 박씨를 가진 사람(함수) 이 있는데 하루가 지날때마다 (리 렌더링) 성씨가 바뀌는 느낌이랄까?

어제는 박씨였는데 오늘은 김씨 내일은 이씨가 될수도 있다는것! 사람인건 똑같은데!

그래서 useCallback을 사용하면 성씨를 그대로 유지할 수 있다는.. 느낌으로 이해했다.

 

그러면 이게 무슨 문제가 되서 useCallback을 사용하느냐? 사실 대부분의 경우 useCallback을 사용하지 않아도, 커다란 문제는 없다고한다. 하지만 컴포넌트 렌더링이 자주 발생하거나, 렌더링 할 컴포넌트가 많을때 useCallback을 이용하여 최적화 해 주는 것이 좋다고한다!

 

useCallback 함수를 사용하는 컴포넌트 예제

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

const getAverage = (numbers) => {
  console.log("평균 값 계산중..");
  if (numbers.length === 0) return 0;
  const sum = numbers.reduce((a, b) => a + b);
  return sum / numbers.length;
};

const Average = () => {
  const [list, setList] = useState([]);
  const [number, setNumber] = useState("");

  const onChange = useCallback((e) => {
    setNumber(e.target.value);
  }, []); // 컴포넌트가 처음 렌더링 될 때만 함수 생성

  const onInsert = useCallback(() => {
    const nextList = list.concat(parseInt(number));
    setList(nextList);
    setNumber("");
  }, [number, list]); // list 혹은 number값이 바뀌었을 때 함수 생성

  const avg = useMemo(() => getAverage(list), [list]);

  return (
    <div>
      <input value={number} onChange={onChange} />
      <button onClick={onInsert}>등록</button>
      <ul>
        {list.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
      <div>
        <b>평균값:</b> {avg}
      </div>
    </div>
  );
};

export default Average;

onChange 그리고 onInsert 부분에서 사용하고 있다.

 

useCallback의 첫번 째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣어서 사용한다.

요기 두번째 파마리터에 들어오는 배열은 어떤 값이 바뀌었을때 함수를 새로 생성해야 하는지 명시해야한다.

 

빈 배열을 넣게되면, 처음 렌더링할때 만들어진 함수를 계속 사용하며, 배열에 값을 넣게되면, 그 배열에 있는 값이 변화 할때마다 첫번째 파라미터로 들어온 함수를 새로만들어서 사용한다.

 

* 함수 내부에서 상태 값에 의존해야 할 때는 그 값을 반드시 두 번째 파라미터로 오는 배열에 명시해줘야 한다.

위의 onChange 함수는 따로 값을 조회하지않고 그냥 설정하는 역할이기때문에 두번째 파라미터로 빈 배열을 줘도 되지만, onInsert 함수 같은 경우에는 보시다시피 기존에 있는 list 배열과 number를 조회하고 nextList를 생성하기 때문에 두번째 파라미터 배열 안에 이 두 값을 꼭 넣어줘야한다!

 

 

 

 

* velopert 님의 리액트를 다루는 기술 서적을 보고 참고하여 쓴 글입니다. *