[React] React Hooks④: useMemo

useMemo hook은 리액트 컴포넌트가 리렌더링 될 때 기존 연산된 결과값을 캐싱(memoization) 하게 해주는 훅이라고 리액트 공식문서는 설명하고 있습니다. 위 설명을 이해하기 위해서는 함수형 컴포넌트의 중요한 특징을 한 가지 이해해야 합니다. 코드 예제를 살펴보면서 그 특징에 대해서 알아보겠습니다. 함수형 컴포넌트의 특징 const TodoList = ({ todos, tab, theme }) => { const visibleTodos = filterTodos(todos, tab); // ... return ... } TodoList라는 함수형 컴포넌트가 있습니다. 함수형 컴포넌트는 기본적으로 컴포넌트가 리렌더링이 될 때 컴포넌트의 모든 부분(자바스크립트 로직, UI)을 리렌더링합니다. 예를 들어 TodoList라는 컴포넌트에 있는 state나 부모 컴포넌트로부터 받은 props(해당 코드에서는 todos, tab, theme)가 update 될 때 TodoList 컴포...

원문링크 : [React] React Hooks④: useMemo