이전 포스트 성능개선 비교 요약
useMemo
2개의 인자를 받는다, 1번째 인자는 callback 함수(useMemo가 return 할 값) , 2번째 인자는 배열(의존성 배열[deps], 배열안에 요소의 값이 업데이트 될때만 callback함수를 다시 호출해서 메모이제이션된 값을 업데이트해서 다시 메모이제이션 해줌) , 만약에 빈 배열을 넘겨주면 맨 처음 컴포넌트가 마운트될때만 값을 계산하고 이 후에는 항상 메모이제이션 된 값을 꺼내와 사용함
ex) function Component() { // value가 초기화가 되기때문에 calculate() 함수가 계속 호출
const value = calculate();
return <div>{value}</div>
}
ex) function Component() {
const value = useMemo(() => calculate(), [])
return <div>{value}</div>
}주의점
꼭 필요할때만 사용, 값을 재활용하기 위해 메모리를 소비해 저장하기때문에 불필요한 값을 저장하면 안됨.
React.memo
React.memo는 고차 컴포넌트(HOC, Higher Order Component) 이다.
고차 컴포넌트란 어떤 컴포넌트를 인자로 받아 새로운 컴포넌트로 반환해주는 함수이다.
일반 컴포넌트 -> React.memo -> 최적화된 컴포넌트(Prop Check)
오직 'Prop의 변화만 체크함'
Prop의 변화가 있다면 렌더링하고, 변화가 없다면 렌더링을 하지않고 재사용함.
주의사항
- 컴포넌트가 같은 Props 로 자주 렌더링 될때 사용
- 컴포넌트가 렌더링이 될때마다 복잡한 로직을 처리해야할때 사용
babypig