memoization

[React] 컴포넌트 성능 최적화를 위한 useCallback

오늘은 리액트에서 useMemo와 비슷한 역할을 하는 useCallback 훅에 대해서 더 자세히 공부하고 기록해보려 한다.  1. useCallbackuseCallback 또한 useMemo와 같이 momoization 기법으로 컴포넌트 성능 최적화를 위한 훅으로 사용된다.다른점은 useMemo는 인자로 콜백함수를 넣으면 함수가 리턴하는 값을 memoization 해주는 것이고, useCallback은 인자로 콜백함수를 넣으면 콜백 함수 자체를 momoization하는 것이다. 2. 예제 위 코드에서 input 값이 바뀌면 노란 박스의 사이즈가 바뀌고, useEffect의 "사이즈 변경" 호출되는 것을 확인할 수 있다. 하지만 변경을 눌러 배경 색상을 바꿀 때도 useEffect가 호출되는 문제가 발생..