React : useMemo()

useMemo를 사용하게되면 변경된 부분에 대해서만 새로 업데이트를 해준다. 

 

그래서 프로젝트에 적용을 해보았다. 

 

구현하고자 하는 것

루틴을 완료하면 체크버튼을 눌러서 루틴이 완료했다는 것을 보여준다.

 

 

해결

const countCompletedRoutines = useMemo(() => {
    const countRoutines = routines.filter(routine => routine.completed === true);
    return countRoutines.length;
  }, [routines]);

이렇게 useMemo를 사용해서 새로운 함수를 만들어주었다. 

routine이 completed된 것들의 길이를 구하는 건데 루틴 completed가 false에서 true로 바뀌는 경우,

이 변경된 부분에 대해서만 새롭게 업데이트를 해주기 위함이다.

 

이 함수를 리턴하는 곳에서 

{`✔︎  You completed ${countCompletedRoutines} routines`}

이렇게 사용해주었다.

useMemo를 사용한 경우 함수를 넘기는 것이 아닌 변수를 넘기기 때문에 countCompletedRoutines()가 아닌countCompletedRoutines로 했다.