1-10) [리액트 기초] useMemo함수의 불필요한 재호출 방지

리액트의 최적화 기능 중의 하나의 useMemo에 대해서 알아보자.

 

리액트의 장점은 실시간 렌더링이라고도 할 수 있지만, 불필요한 렌더링을 하게되는 경우 

많은 리소스에 연산을 하게되어 성능 저하의 원인이 된다.

 

불필요한 리렌더링을 방지하기위하 목적으로 useMemo 를 사용한다.

 

 

 

const value = useMemo(callback, arrays?];

 

호출된 useMemo 는 의존성배열인 arrays의 값이 변할 때만 리렌더링되며, 값이 변하지 않는 한 재호출되지 않는다.

 

 

아래 사용 예시를 보자

 

const analyzeTodo = useMemo(() => {
    console.log('todo가 변경될 때 마다 analyzeTodo() 함수를 호출합니다.');
    const totalCount = todo.length;
    const doneCount = todo.filter((it) => it.isDone).length;
    const notDoneCount = totalCount - doneCount;
    return { totalCount, doneCount, notDoneCount };

  }, [todo]);

  const { totalCount, doneCount, notDoneCount } = analyzeTodo;

 

 

useMemo를 사용하기전에는 입력 이벤트를 받을 때마다 리렌더링이 되었으나 useMemo로 todo 의 값이 변경될 때만 리렌더링 되도록 수정한 예시이다.