useMemo

https://jjaong34.tistory.com/77 [React] 성능 최적화 memo# memo ? 특정값을 강제로 메모리에 할당해서 값을 재활용 (속도가 빨라짐) 메모이제이션을 많이 할수록 메모리 점유율을 강제로 늘려서 성능을 올림 자바스크립트 엔진의 Garbage Collection에서 제외jjaong34.tistory.com지난시간에 이어서 메모이제이션에 대해 좀 더 알아보려고 합니다. # lodash만약 부모컴포넌트에 참조형 변수가 있으면 부모컴포넌트가 재랜더링 될때마다 참조형 변수가 재선언되면서 자식컴포넌트에 전달된 변수가 있기 때문에 계속해서 재호출 됩니다. lodash로 참조형 변수값을 비교해 재호출을 방지할 수 있습니다. 설치)npm i lodash 사용) app.jsimport {..

# memo ? 특정값을 강제로 메모리에 할당해서 값을 재활용 (속도가 빨라짐) 메모이제이션을 많이 할수록 메모리 점유율을 강제로 늘려서 성능을 올림 자바스크립트 엔진의 Garbage Collection에서 제외됨 (안쓰는 메모리를 정기적으로 제거해서 메모리 최적화) # 언제 사용할까? 부모 컴포넌트가 재호출되면 자식 컴포넌트는 변경되는 요소가 없음에도 불구하고 무조건 같이 재호출됨 # 기본 구조 export default memo(컴포넌트) 컴포넌트를 내보낼때 memo로 감싸준다. # 예시 app.js 와 그 자식 컴포넌트로 예시를 들어보겠습니다 - app.js import { useState } from 'react'; import Child from './Child'; function App() {..