[Hooks] useMemo

useMemo 훅은 재사용하는 값이 있을 때 그 값을 구하는 함수를 다시 호출하지 않고 기존 값을 쓰도록 해줍니다. 다음과 같은 함수가 있고 이를 return 함수 전에 호출해 count 변수에 담아 호출해봅시다. 기본적인 동작 흐름은, 화면에 출력된 사용자 아이디를 클릭하면 active 객체의 값이 true가 되므로 countActiveUsers 함수를 통해 활성화된 user의 개수를 셉니다. 

 

useMemo를 이용해 countActiveUsers 함수를 감싼 이유는, input의 값이 변경될 때마다 onChange가 호출되면서 State가 변경되어 re-render가 이루어지고 매번 countActiveUsers 함수를 호출하기 때문입니다. {count}는 c++의 개념으로 l-value인데, 함수가 실행되어야만 값이 할당됩니다.

 

{count}를 사용하는 이상, 활성화된 사용자의 상태가 변하지 않아도 렌더가 될 때마다 countActiveUsers 함수가 호출되어 버립니다. users가 State기 때문에 users가 변할 때만 countActiveUsers 함수를 호출해서 count의 값을 갱신하는 게 합당해 보입니다. users가 변하지 않을 때 기존 값을 재활용하면 성능 향상에 도움이 될 것입니다. 이런 경우에 useMemo를 사용할 수 있습니다.