memo
컴포넌트가 업데이트 될 떄,
재실행 되지 않아도 되는 자식 컴포넌트들이 모두 업데이트 되는 경우가 있다.
memo로 함수를 코드를 감싸주면
memo가 이전 prop 값과 새로 받을 prop값을 비교한 후 , 값이 같으면 memo가 막아준다
이는 부모컴포넌트에 의해 실행되었을 떄만 관련이 있고 내부의 상태값과는 관련이 없다.
const Child = memo(function Child({text}){
return <><p>{text}</p></>
});
export default Child
즉
자식 컴포넌트에서 관리하는 상태값이 바뀐 경우 > 컴포넌트 재실행
부모 컴포넌트가 재실행됐는데, 보내주는 속성값이 바뀐 경우 > 컴포넌트 재실행
부모 컴포넌트가 재실행됐는데, 보내주는 속성값이 같은경우 > 컴포넌트 재실행 X (memo 가 제한)
주의
- 최대한 상위 트리에 속한 컴포넌트를 감싸는 것을 권장 => 그 하위에 속하는 컴포넌트들도 재실행이 되지 않음
- memo를 남용하면 리액트는 컴포넌트 함수를 실행하기 전에 항상 prop값을 확인하는 일을 수행해야 하므로 성능에 영향을 준다.
useMemo
컴포넌트 함수 내에 불려와진 일반 함수의 실행을 막기 위한 hook
컴포넌트 함수 내에 일반 함수를 감싸준다
복잡한 계산이 있을 때만 사용됨
function calculate(num){
// 복잡한계산...
return result;
}
const Child = memo(function Child({text,num}){
const calculateResult = useMemo(() => calculate(num),[num]);
return <><p>{text}</p></>
});
export default Child
react는
첫번째 인자 - 실행할 함수 ( react는 함수의 결과를 저장)
두번째 인자 - 의존성 ( 비어있을 시 재실행되지 않음)
주의
- useMemo 또한 남용하면 리액트는 함수를 실행하기 전에 항상 값을 비교하는 일을 수행해야 하므로 성능에 영향을 준다.
- 소요 시간이 긴 복잡한 계산 함수에만 사용하도록 한다.
'React' 카테고리의 다른 글
[React] Custom Hook (0) | 2024.04.17 |
---|---|
[React] Http 연결, fetch (0) | 2024.04.16 |
[React] useContext (0) | 2024.04.08 |
[React] useEffect, useCallback (0) | 2024.04.05 |
[React] Refs, Portals (0) | 2024.04.04 |