React

[React] useMemo

JungCw 2024. 7. 24. 10:37

useMemo Hook

 

useMemo 훅은 컴포넌트의 성능을 최적화하는데 사용된다.

함수의 계산 결과를 메모리에 저장하여 불필요한 재계산을 막아 자원의 낭비를 막는다.

 

useMemo 훅의 사용법은 다음과 같다.

const memo = useMemo(calValue, deps);

 

이전에 보았던 useEffect 훅과 동일하게 실행시킬 함수와 종속성이 요구된다.

 

 

const lists = useMemo(()=>{     //useEffect에 객체 전달로 인한 리랜더링 방지
        return allLists.filter(list => list.user_content_id === 1);
    }, [allLists]);

 

이런 식으로 사용할 수 있다.

간단히 설명하자면, 'allLists' 라는 변수에 변화가 발생하면 useMemo 내부의 콜백 함수(여기서는 return allLists.filter(list => list.user_content_id === 1);)를 실행한다.

 

 

이러한 useMemo는 단순히 최적화의 역할로도 사용되나 필자는 다른 용도로써의 필요성으로 공부하게 되었다.

useMemo는 최적화를 위해 종속성에 변화가 존재해야 저장된 값을 변화시키는 특성을 가지고 있음을 이용해 useEffect 훅을 사용할때 발생하는 문제를 해결할 수 있었다.

이는 다른 포스트에서 설명하겠다.

 

https://memo-code.tistory.com/51

 

[React] useEffect의 무한루프 에러

React에서 useEffect 훅은 정말 자주 이용되는 훅 중에 하나이다.그만큼 익숙한 훅이었는데 이번에 사용하다가 무한 반복되는 에러를 발견했다.대표적인 useEffect에서의 무한루프 발생하는 문제는 종

memo-code.tistory.com