useMemo 란 사용방법

카테고리 없음

김가마 2023. 9. 8. 17:06

useMemo

✅ 메모이제이션 memoization

컴퓨터 프로그램이 동일한 계산을 반복 해야 할떼 이전에 계산한 값을 메모리에 저장함으로싸 동일한 계산의 반복 수행을 제거하고 , 프로그램 실행 속도를 빠르게 하는 기술이다.

✅복잡한 계산일 경우 useMemo를 사용하는 것이 추천되고 이런 경우 성능상 큰 이점으로 작용한다.

✅ 내가 렌더링 하고 싶은 Components 만 재렌더링시키고 싶을 때 사용하는 react Hooks이다.

효율적이고 다시 다른 함수들을 같이 호출하지 않기 때문이다.

Const value = useMemo(() => {

Return calcutate()’

},[]) => [item]

First 인자는 콜백 함수를, 두번째 인자로 의존성 배열을 받는다.

여기서 두번쨰 인자인 배열의 요소 값 value 이 업데이트 될때마다 콜백 함수를 다시 호출해서 memoization된값을 업데이트 해주고 다시 memoization해준다.

[] 만약 빈 배열[]을 넘겨주고 맨 처음 컴포넌트가 마운트 되엇을때만 값을 계산해주고 이후 항상 memoiziaiton된 값을 꺼내 와서 사용한다,

✅그래소 꼭 필요할 때만 사용한다.

값을 재활용 ♻하기위해 따로 메모리를 소비해서 저정해 놓은 것이다.

그렇기 때문에 굳이 불필요한 값을 모두 usememo할 필요는 없다. 성능이 안좋아 질 수도 있다.

Import 사용

Import {ussMemo} from ‘react’;

useMemo

아니 문제가 있다

클릭하면 두번이나 반복적으로 console.log가 뜬다

자 이건 누가봐도 비효율적인 ..ㅋㄷ 코드

이럴떄 useMemo 사용한다!!