React 최적화 useCallback

지금까지 memo와 useMemo를 알아보았는데요 

마지막으로 useCallback에 대해 살펴보겠습니다.

 

개념

---

공식문서입니다.

 

 

useMemo는 값을 저장했던 반면 useCallback은 함수를 반환합니다.

memoization이란 반복되는 결과값을 저장해서 다음에 같은 결과가 나올 때 빨리 실행하는 코딩 기법입니다.

 

형태는 두 번째 배열 안에 있는 값이 변할 때 첫 번째 콜백 함수를 반환합니다.

 

 

예시

---

실제 코드를 보며 더 자세히 알아보겠습니다.

// App.jsx
function App() {
  const [value, setValue] = useState("");
  const [count, setCount] = useState(0);
  
  const returnSumCount = () => {
      return count + 1;
  }

  return (
    <div>
      <input type="text" value={value} onChange={e => setValue(e.target.value)}/>
      <Children sumCount={returnSumCount}/>
    </div>
  );
}

App.jsx에는 input과 Children이 있습니다.

Children에 count+1을 하여 props로 내려보내고 있습니다.

 

// Children.jsx
const Children = ({sumCount}) => {
    console.log("Children render");
    return(<div>{sumCount}</div>)
}

Children을 보면 렌더링 될 때마다 콘솔을 찍고 있습니다.

 

자 여기서 input값이 바뀌면 어떻게 될까요?

위와 같이 value와 count는 상관이 없음에도 계속 콘솔이 찍히는 것을 볼 수 있습니다.

 

그렇다면 Children을 memo로 감싸면 어떻게 될까요?

const Children = memo(({sumCount}) => {
   console.log("Children render");
   return(<div>{sumCount}</div>)
})

결과는 동일하게 콘솔이 계속 찍힙니다.

 

이는 부모에서 함수가 렌더링 될 때마다 함수가 재선언되고 그때마다 자식은 해당 함수(props)가 달라졌다고 인식하기 때문입니다.

 

이제 우리가 사용해야 할 것은 memo를 유지한 채로 useCallback을 사용해야 합니다.

 

부모에 있는 함수를 useCallback으로 감싸줍니다.

const returnSumCount = useCallback(() => {
  return count + 1;
}, [count])

이렇게 되면 value가 바뀌면서 재렌더링 되더라고 함수는 재선언되지 않아 자식 요소가 렌더링 되지 않습니다.

 

 

 

마치며

---

지금까지 memo, useMemo, useCallback을 알아보았습니다.

최적화 작업을 하며 효율적인 코드를 작성하는 것은 좋지만 무작정 남용하는 것은 좋지 않습니다.

상황에 맞게 사용하시면 감사하겠습니다. :)