[React] useCallback은 언제 사용하면 좋을까?

useCallback

• useCallback은 콜백함수를 메모라이제이션을 하며 반환하는 함수 입니다. 사용하는 이유 중 가장 큰 이유는 불필요한 재렌더링을 피함으로써 성능을 최적화 하는데 사용합니다.

//useCallback을 사용하지 않을때

import React, { useState } from 'react';

const Component = () => {
    const [value, setValue] = useState("")

  const onChangeValue = ((e) => {
   setValue(e.target.value);
  })

  return (
    <input onChange={onChangeValue}/>
  );
};

• React에서는 구성 요소가 렌더링될 때마다 이전 렌더링과 비교하여 업데이트가 필요한지 여부를 결정합니다. 값이 변경되면 구성 요소가 다시 렌더링됩니다. 그러나 컴포넌트가 다시 렌더링할 때 콜백 함수를 prop으로 수신하면 상태와 props가 변경되지 않은 경우에도 컴포넌트가 다시 렌더링됩니다.

//useCallback을 사용할때

import React, { useCallback, useState } from 'react';

const Component = () => {
    const [value, setValue] = useState("")

  const onChangeValue = useCallback((e) => {
   setValue(e.target.value);
  },[])

  return (
    <input onChange={onChangeValue}/>
  );
};

• 위처럼 useCallback을 사용하여 감싸주면 내부의 상태가 변경 되지 않는한 재렌더링 되지 않습니다.

---

• 너무 많이 사용하면 코드를 이해하고 유지하기가 어려워 지므로 회원가입페이지 같은 어쩔수 없이 useState처럼 상태변화를 자주 일으키는 코드들이 많은 페이지 즉, 재렌더링이 많이 일어나는 페이지를 구성할 때 사용하면 좋을거 같다는 생각입니다.