React Hooks : useMemo 사용😊
Memoization
기존의 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법.
이를 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있다.
랜더링할때마다 호출되는 컴포넌트 함수
일반적으로 React의 함수형 컴포넌트는 다음과 같은 구조로 작성 된다.
function MyComponent(props) {
// 어떤 로직 (JavaScript)
return /* 어떤 화면 (JSX) */
}이렇게 작성된 컴포넌트 함수는 앱에서 랜더링이 일어날 때마다 호출이 된다. 컴포넌트 함수가 호출이 되면 그 안에 자바스크립트 로직들이 수행되고, 이를 기반으로 JSX로 마크업된 UI가 리턴되는 기본구조이다.
React에서 컴포넌트의 랜더링은 한 번 일어나고 끝이 아닌 수시로 계속 일어난다.
대표적인 예로 컴포넌트의 자신의 상태 변경이 일어날 수 있고, 아니면 부모 컴포넌트의 상태 변경이 일어나 덩달아 함께 랜더링되야 하는 경우도 있다.
React에는 수동으로 다시 랜더링을 해주는 API도 있고,사용자가 브라우저에서 새로고침을 할 때도 컴포넌트의 재 랜더링은 불가피하다.
함수형 컴포넌트에 memoization 적용
랜더링이 일어날 때 마다, 비교하여 재랜더링을 한다면 UI가 지연되는 경험을 하게 될 것이다.
이때 필효한게 useMemo hook함수이다.
useMemo함수는 2개의 인자를 받는데, 첫번째는 결과값을 생성해주는 팩토리 함수이고, 두번째는 기존 결과값 재활용 여부의 기준이되는 입력값 배열이다.
기존의 함수를 useMemo 함수의 첫번째 인자로 넘기고,
두 번째 인자로 prop이 든 배열을 넘긴다.
이렇게 해주면, 기존 함수는 두번째 prop이 달라졌을 때만 호출이 되고, 동일할 때는 최초 호출 결과가 계속해서 재사용된다. 이렇게 하면 입력 필드에 글자를 입력할때마다 지연이 발생하지 않는 것을 확인할 수 있다.
하지만 useMemo hook을 남용하면, 컴포넌트의 복잡도가 올라가기 때문에 코드를 읽기 어려워지고 유지보수성이 떨어질 수 있다. 또한 레퍼런스는 재활용을 위해서 가비지 컬렉션에서 제외되기 때문에 메모리를 더 쓰게 된다.
