[React] useMemo 를 사용하여 연산한 값 재사용하기

주로 성능을 최적화 하는데 사용 이전에 배열 항목 추가, 제거, 수정 파일 활용 해당 예시를 위해 우선 App.js에서 active 값이 바뀔 때마다 카운트 되는 함수를 작성한다. function countActiveUsers(users) { console.log('활성 사용자 수를 세는 중...'); return users.filter(user => user.active).length; } 잘 작동은 하지만 input box에서 onChange 될 때마다 타는 문제가 있음 이럴 때 사용하는 것이 useMemo useMemo는 특정 값이 바꼈을 때만 특정 함수를 사용하여 연산을 하고 원하는 값이 바뀌지 않았으면 리 렌더링할 때 이전에 만들어 놓은 값을 재사용 const count = useMemo(() => countActiveUsers(users), [users]); // users가 바뀔 때에만 실행 됨 해당 부분만 바꿔주면 input box에 값을 변경해도 해당 함수가 실행되지...

원문링크 : [React] useMemo 를 사용하여 연산한 값 재사용하기