✨ 성능 최적화를 해야하는 이유React 앱을 만들다보면 성능이 중요한 문제가 될 때가 있다. 리액트에서는 컴포넌트의 상태가 변경될 때마다 렌더링 과정을 거치게 되는데, 이 과정 중에 변화가 없는 컴포넌트까지 불필요하게 렌더링되는 경우가 존재한다. 그리고 복잡한 계산이나 데이터 처리는 애플리케이션의 반응 속도를 늦출 수 있어 사용자 경험을 저해할 수 있다. 따라서 이를 위해서 useMemo, useCallback, React.memo라는 기능을 제공하고 있다. 세 가지가 어떻게 다른지 어떤 방식으로 쓰이는지 알아보자! 📝 useMemouseMemo는 리액트에서 컴포넌트의 성능을 최적화하는데 사용되는 훅이다. 여기서 memo는 memoization을 뜻하는데 "메모리에 넣기"라는 의미이며 컴퓨터가 동일한..

useCallbackuseCallback은 useMemo와 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. useMemo 에서 작성했던 Average 컴포넌트의 경우, 컴포넌트가 리렌더링 될 때마다 새로 만들어진 함수를 사용하게 된다. 이 방식의 경우 크게 문제는 없지만, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해 주는 것이 좋다. useCallback 사용하기const onChange = useCallback(e=>{ setNumber(e.target.value); }..