useMemo

리액트에서 update, 아니면 재랜더링 등 이런 부분에서 최적화를 하기 위한 기능들이 몇개 있는데,

React.memo()
useMemo()
useCallback()

이것들임.

 

memo는 말 그대로 메모, 기억해두겠다는 거임.

memoization 이라고도 하는데, 메모리에 넣는다는 거임.

 

일종의 캐싱임.

 

memoization 이거 자체를 캐싱이라고 보면 됨.

 

얘의 사용방법은

const 변수 = useMemo(()=>{return이 있는함수.},[의존성배열])

이러면 변수에 첫번째 랜더링 했을 때 이 함수가 실행되면서 값을 저장하고 있다가, 의존성 배열에 있는 참조중 변화가 일어나면 이것이 다시 실행된다.

그 전까지는 캐싱해놨던 값을 준다.

 

  const analyzeTodo = useMemo(()=>{
    const totalCount = todo.length;
    const doneCount = todo.filter(el=>el.isDone).length;
    const notDoneCount = totalCount - doneCount;

    return {
      totalCount,
      doneCount,
      notDoneCount
    }
  }, [todo])

 

저기 저 todo에 무언가 변경이 되어야만 이 함수가 다시 실행되는거.

그 전까지는 그냥 요청 시 캐싱된 값을 줌