[React] 메모리 최적화

✌ 메모리 최적화

useMemo, useCallback 으로 최적화시킨다.

useMemo

• 메모이제이션된 값을 반환한다. 즉 성능 최적화를 위해 연산된 값을 useMemo라는 Hook을 사용하여 재사용하는 것이다.

• 메모이제이션이란 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 동적 계획법의 핵심이 되는 기술이다.

• useMemo의 첫번째 파라미터에는 어떻게 연산할지 정의하는 함수를 넣고, 두번째 파라미터에는 deps 배열을 넣어주면 된다. 이 deps 배열 안에 넣은 내용이 바뀌면 등록한 함수를 호출해서 값을 연산해주고, 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용한다.

useCallback

• 메모이제이션된 콜백을 반환한다. 즉 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다.
• 컴포넌트에 선언된 함수들은 컴포넌트가 리렌더링 될 때마다 새로 만들어진다. 물론 함수를 선언하는 것 자체는 메모리, CPU, 리소스를 많이 차지하는 작업이 아니기 때문에, 함수를 새로 선언하는 것 만으로 큰 부하가 생길 일은 없다. 하지만 한번 만든 함수를 필요할 때만 새로 만들고 재사용하는 것은 여전히 중요한 일이다.
• 그 이유는 컴포넌트에서 props가 바뀌지 않았으면 Virtual DOM에 새로 렌더링하는 것조차 하지 않고 컴포넌트의 결과물을 재사용하는 최적화 작업을 하기 위해서이다. 이를 위해서는 함수를 재사용하는 것이 필수이다.

주의점

• useCallback, useMemo, React.memo는 컴포넌트의 성능을 실제로 개선할 수 있는 상황에서만 해야 한다. 또한 렌더링 최적화를 하지 않을 컴포넌트에 React.memo를 사용하는 것은 불필요한 props 를 비교만 하는 것이기 때문에 실제로 렌더링을 방지할 수 있는 상황이 있는 경우에만 사용해야 한다.

컴포넌트가 re-rendering 되는 조건

• 자신의 상태(state)가 변경될 때
• 부모 컴포넌트가 리렌더링될 때
• 자신이 전달받은 props가 변경될 때
• forceUpdate 함수가 실행될 때