📖 메모이제이션
💬 정의
- 계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 자료구조에서
꺼내 재사용하는 것 - 예시 : React Hooks의 메모이제이션 Hook, memo()
💬 메모이제이션 훅
- 리액트에서 불필요한 리렌더링을 방지하여 퍼포먼스 최적화에 사용된다
- useCallback과 useMemo이 있음
🔍 useCallback
- 전달된 함수 그자체를 메모이제이션함 (함수을 메모하고 반환)
- 함수가 재생성되는 것을 방지하기 위한 목적으로 사용
🔍 useMemo
- 전달된 함수를 실행하고 반환된 값을 메모이제이션함 (값을 메모하고 반환)
- 함수의 연산량이 많을 때 이전 결과값을 재사용하는 목적으로 사용
💬 React.memo()
- 메모이제이션 훅과 동일하게 불필요한 리렌더링을 방지하여 퍼포먼스 최적화에 사용된다
- 다른 점은 고차컴포넌트(HOC)이다
- 그래서 메모이제이션 훅은 훅이기에 함수형 컴포넌트에서만 사용가능하지만
memo는 클래스형에서도 사용이 가능하다 - 사용 방법 : props나 state에 변화가 될때만 랜더링이 일어난다
(부모 컴포넌의 리렌더링때 리렌더링 일어나지 않음)
💡 답변
메모이제이션이란?
계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 자료구조에서
다시 꺼내서 재사용하는 것입니다.
예시로 React에서는 고차컴포넌트인 memo와 useCallback, useMemo로
메모이제션하여 불필요한 렌더링을 줄이고 퍼포먼스 최적화를 합니다.