useMemo (컴포넌트 최적화)

오늘 정리 할 useMemo, useCallback 은 컴포넌트의 최적화에 도움을 준다.

이 두개는 모두 React Hook이다.

컴포넌트의 불 필요한 렌더링을 방지하고자 나온 Hook 이다.

이 전에 알아야 할 기본지식이 있다.

 

두가지의 Hook의 설명에는 메모이제이션(memoization) 이라는 단어가 들어간다.

 

메모이제이션(memoization) 이란

- 컴퓨터 프로그램이 동일한 계산을 반환할 때 이 전의 계산한 값을 메모리에 저장해 놓는다는 뜻이다.

예를 들어서 이미 시험을 볼때 풀어본 문제는 다시 풀어보지 않아도 답을 기억하고 있다는 것이다.

- 즉 반복적인 수행을 제거하여 프로그램의 실행 속도를 높인다.

useMemo

memoization 을 이용해서 처음의 값을 저장해놓고 props 의 변경이 이뤄지지 않는 한 렌더링이 되지 않는다.

나중에 useCallback을 공부할 때 이해하기 편하려면

** useMemo는 메모이제이션 된 값을 반환한다 **

의존성이 변경되는 경우 이 전에 기억하고 있던 리턴값과 비교하여 다른경우에만 리 렌더링을 발생 시킨다.

 

React 공식문서에서는 

useMemo로 전달 된 함수는 렌더링 도중에 실행 되므로 렌더링 도중에 실행하지 않는 함수는 useEffect 를 사용하라고 적혀있다.

여기서 알수있는 점은 렌더링 도중에 실행되는 Hook 이라는 것이다.

이제 useMemo의 사용법을 알아보겠다.

 const count = useMemo(() => countActiveUsers(users), [users]); 
  return ( 
    <> 
      <CreateUser 
        username={username} 
        email={email} 
        onChange={onChange} 
        onCreate={onCreate} 
      /> 
      <UserList users={users} onRemove={onRemove} onToggle={onToggle} /> 
      <div>활성사용자 수 : {count}</div> 
    </> 
  ); 
}

 

위의 코드를 보면 useMemo의 인자에는 연산할 내용(콜백함수) , deps 배열이 들어간다.

첫번째 인자에는 연산할 파라미터를 작성한다.

두번째 인자에는 deps 배열이 들어가는데 배열 안의 요소를 적어주면 그 요소가 변경되면 

우리가 등록한 함수를 호출해서 값을 연산해주고 내용이 바뀌지 않았다면 이 전의 연산한 값을 재사용 하게 해준다.

 

공식문서에서의 마지막 문장은

useMemo는 성능 최적화를 위해 사용할 수는 있지만 의미상으로 보장이 있다고 생각하지는 마세요. 가까운 미래에 React에서는, 이전 메모이제이션된 값들의 일부를 “잊어버리고” 다음 렌더링 시에 그것들을 재계산하는 방향을 택할지도 모르겠습니다. 예를 들면, 오프스크린 컴포넌트의 메모리를 해제하는 등이 있을 수 있습니다. useMemo를 사용하지 않고도 동작할 수 있도록 코드를 작성하고 그것을 추가하여 성능을 최적화하세요. 라고 적혀있다.

 

즉 useMemo는 무조건 사용하는 방법 보다는 성능을 최적화 할 때 사용하면 좋을거 같다.