#10 React - 연산 결과 재사용(최적화 - Memoization)하기- useMemo() - React로 투두리스트 만들기(2)

이번에는 연산 결과를 재사용하여 연산을 최적화하는 방법을 정리해보려고 한다! 그 전에 Memoization에 대해 먼저 알아보자 0.

Memoization Memoization은 "이미 계산한 결과를 기억해두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억해두었던 데이터를 반환시키게 하는 방법"이다. 즉, 어떤 데이터를 연산하는 로직이 있을 때 이전 연산 결과를 기억해두었다가 계산이 필요없는 경우에는 연산하지 않고 기억해둔 데이터를 반환하는 방법이라고 볼 수 있다.

다시말해 "결과를 재사용" 하는 방법이다. 아직 완료하지 않은 todo를 연산하여 화면에 렌더링하는 코드를 구현해보면서 왜 Memoization이 필요한지 알아보도록 하자. 1.

연산 로직 // Edit.js 파일 // 이전코드와 동일 // 완료한 todo 개수 const [completedTodo, setCompletedTodo] = useState(0); // 완료한 todo 개수 계산 const increase...