Memoization

메모이제이션이란, 동일한 계산을 반복할 때 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 해주는 것이다.

리액트에서 메모이제이션은 어떻게 할까?

React.memo를 활용해서 할 수 있다.

const MyComponent = React.memo(function MyComponent(props){});

React.memo는 HOC이다. 얘에게 컴포넌트를 인자로 전달하면 동일한 props를 전달 받으면 다시 렌더링하지 않고, 기존에 저장해둔 컴포넌트를 바로 뱉는 애를 리턴한다.

보통 부모 컴포넌트에 상태를 많이 끌어올려 놓고 자식에 props로 주는 경우가 많기 때문에 그럴 경우에는 쓰임새가 많다.

React.memo의 좋은 점은 또 있다. 얘는 props 변화에만 영향을 주기 때문에 state, context가 변할 때는 다시 렌더링을 한다. 그래서 얘에게 인자로주는 컴포넌트 내에서 자유롭게 state, context 관련 로직을 활용할 수 있다.

props의 변화를 확인하는 것은 얕은 비교를 통해 한다. 만약 다른 비교 동작을 원하면 두번 째 인자로 비교 함수를 주면 된다.

React.memo(MyComponent, bigyo)

 

활용

아직 활용해보지 않았다. 현 프로젝트에서 개발한 이미지 편집기의 경우에 맨위 부모 컴포넌트에 상태 변수가 몰려 있고, 그 하위 컴포넌트에 props로 주는 경우가 많기 때문에 추후 리팩토링 시 얘를 활용하면 앱의 불필요한 렌더링 동작을 많이 줄일 수 있을 것 같다.

 

참조: React 공식 문서