본문 바로가기

Front-End: Web/React.js

memo, useMemo, useCallback, useRef

반응형

memo : PureComponent와 비슷. props 값이 변경될 때만 실행됨

 

=> 매번 실행/생성되지 않고, 캐시에 저장하고 이를 사용함

useRef : 일반 값을 기억함

useMemo : 복잡한 함수의 결과값을 기억함

useCalback : 함수를 기억함

 

하지만 너무 기억을 잘하기 때문에 까먹어야하는 경우가 있을 수 있음.

그럴 때 안에서 쓴 state를 [두번째 인자] 안에 작성해줌. (다시 새로 실행되도록 작성)

그렇게 안하면, 첫 번째로 실행된 값을 평생 기억하게 됨

(+) 반복문에서 주로 최적화 사용

 

(+) 전체가 리렌더링되어도 초록색까진 괜찮음. 근데 전체가 빨간색으로 뜨면 최적화 필요함

 

반응형