리액트 - memo, useMemo : 고비용 함수 처리

memo 자식 컴포넌트 재렌더링 막기

렌더링에 시간이 오래 걸리는 컴포넌트는 memo로 필요할 때만 재렌더링 하도록 하는 것이 좋다

const ChildTemp = memo(() => {

    return <div>ChildTemp</div>;

});

 

항상 재렌더링 하도록 하지 않고 자식 컴포넌트에 전달된 props가 변할 때만 재렌더링하도록 하도록 한다.

 

모든 곳에 memo를 붙이면 props가 변했는지 비교하는 연산을 수행해야 하므로 오히려 시간이 더 걸린다.

=> 꼭 필요한 곳에만 쓰고 대부분 쓸 일이 없긴 하다.

---

useMemo 컴포넌트 안의 함수 1회만 실행

useEffect와의 차이

useEffect는 html렌더링 이후 실행,

useMemo는 렌더링 중에 실행

 

dependency가 변경되었을 때만 함수를 실행하도록 하여 매번 불필요한 실행을 하지 않도록 한다.

const result = useMemo(() => {

    return 오래걸리는함수();

},[]);