📖 들어가며 이전 글 React.memo 글에서 부모 컴포넌트에서 함수를 props로 받을 때 해결할 수 없는 문제를 해결할 수 있는 useCallback에 대해서 알아보겠습니다. useCallback이란 ❓ 먼저 React에서 useCallback은 리렌더링 사이에 함수 정의를 캐시 할 수 있게 해주는 React 훅입니다. 즉, useCallback 훅은 기본적으로 컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있게 하는 훅으로 React에 함수를 캐싱하고 매 실행마다 해당 함수를 재생성되는 상황을 막을 수 있습니다. 사용 방법 캐싱하려는 함수를 useCallback으로 래핑 하기만 하면 됩니다. // Button.js const Button = ({ onClick }) => { console.log('..

📖 들어가며 React에서 성능을 최적화하기 위해 사용할 수 있는 React.memo에 대해 소개하고, 기능을 어떤 상황에서 왜 사용하고 동작원리와 사용 예시 코드도 함께 알아보겠습니다. React.memo란 ❓ memo를 사용하면 해당 컴포넌트의 props가 변경되지 않은 경우 리렌더링을 건너뛸 수 있습니다. 즉, 메모화된 버전의 컴포넌트로 해당 컴포넌트의 props가 변경될 때만 리렌더링을 할 수 있습니다. 커다란 큐모의 컴포넌트나 복잡한 상황에서 불필요한 리렌더링을 막아 성능을 최적화할 수 있습니다. 동작 원리 💡 React.memo는 인자로 들어간 컴포넌트에 어떤 props가 입력되는지 확인하고 입력되는 모든 props의 신규 값을 확인한 뒤 이를 기존의 props의 값과 비교하도록 리액트에게 전..