React hook의 모든 것(2) (useMemo)

1) useMemo란?

useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

const 저장할변수 = useMemo(()=> {
  return 계산하는_무거운함수()
}, [감시하고_있는_변수])

2) useMemo 예제

a) useMemo쓰기전

- 코드 설명

• 계정명과 이메일을 입력하고 등록버튼을 누르면 사용자를 추가할 수 있음
• 계정명을 클릭 시, 계정명의 글씨색이 초록색으로 변하면서 활성사용자가 됨
• 활성사용자의 계정명을 다시 클릭 시, 계정명의 글씨색이 검정색으로 변하면서 활성사용자에서 해제됨

- 문제점(콘솔을 살펴보자)

• line59에서 const count = countActiveUsers(users); 활성사용자수를 세는 함수를 실행하여 반환값을 count변수에 할당하고 있음
• 맨처음 렌더링 될 때 line59가 실행됨
• 사용자를 등록할 때마다 line34 onCreate함수의 setState함수가 발동하여 재렌더링되고 line59가 실행됨
• 사용자 계정이름을 클릭할 때마다 line51 onToggle함수의 setState함수가 발동하여 재렌더링되고 line59가 실행됨
• 계정명 입력창, 이메일 입력창에 입력할 때마다 line16 onChange함수의 setState함수가 재렌더링되고 line59가 실행됨
  -> countActiveUsers함수는 활성사용자의 수를 세는 함수이다. 그런데 입력을 할 때마다 활성 사용자의 수를 셀 필요가 있을까? 없다. 활성사용자수가 증가하거나 감소할때만 countActiveUsers를 실행하면 될 것이다.

b) useMemo를 쓰면

• line59에서 useMemo를 쓴 덕분에 users가 변경될 때만 useMemo안의 콜백함수를 실행한다.

  const count = useMemo(() => {
      return countActiveUsers(users);
  }, [users]);

3) useEffect와 차이점

• useMemo(실행될 것, [값])라고 할 때 useMemo는 렌더링 전에 실행되어 메모이제이션한 것을 반환한다. 값이 바뀌었는지 확인하고 렌더링 전에 저장된 것을 보내준다.
• useEffect는 렌더링 후에 상태가 업데이트 되었을 때를 감지하여 동작한다.

비동기적으로 fetch를 할 때 useEffect를 쓰는데 useMemo를 쓰면 안되나라는 의문이 들었다. useMemo를 쓰면 안되는 이유를 찾아봤는데 해당링크에서 답을 찾을 수 있다.
For more additional info, you should NOT resolve async action in useMemo since you will block the thread (and JS is single-threaded). Meaning, you will wait until the promise will be resolved, and then it will continue with computing the component.