[React]useCallback 를 사용하여 함수 재사용하기(feat React Developer Tools)

이전에 만들었던 함수를 새로 만들지 않고 재사용함 useMomo와 유사 예를 들어 특정 값이 바뀌었을 때만 새로 함수를 생성하고 그렇지 않으면 기존에 만든 함수를 재사용한다. 기존에 작성했던 onChange, onToggle, onCreate 함수 등 모든 함수들이 컴포넌트가 매번 리 렌더링 될 때마다 새로운 함수를 만들고 있다. 함수를 새로 만드는 것 자체는 리소스를 많이 차지하진 않지만 한 번 만든 함수를 재사용 할 수 있으면 재사용하는 것이 좋다. 컴포넌트들이 props가 바뀌지 않으면 vitual DOM을 새로 그리는 것이 아닌 이전에 만들어 놓은 결과물을 재사용할 수 있도록 구현할 수 있다. 함수가 계속 새로 만들어 지다 보면 이렇게 최적화를 할 수 없기 때문에 함수도 재사용이 필요하다. useMemo와 유사하게 기존의 함수를 감싸주기만 하면 된다. 예시 ** 기존 소스 const onChange = e => { const { name, value } = e.target s...