모든 컴포넌트에 React.memo를 사용해도 되나요?

React.memo

DOM을 업데이트할 때 리액트는 컴포넌트를 렌더링 한 후, 이전 렌더링의 결과와 비교한다. 그러고 나서 결과가 다르다면, 리액트는 DOM을 업데이트한다. 이 비교 과정은 속도가 굉장히 빠르긴 하지만 React.memo를 사용해서 좀 더 빠르게 진행시킬 수 있다.

 

컴포넌트가 React.memo로 래핑되어있다면 리액트는 컴포넌트를 렌더링 하고, 결과를 기억한다. 그다음 렌더링이 일어나기 전에 만약 컴포넌트의 props가 동일하다면 리액트는 기억된 내용을 다시 재사용한다. 즉, React.memo가 사용된 컴포넌트는 props가 변경되지 않으면 다시 리 렌더링되지 않기 때문에 불필요한 렌더링을 방지할 수 있다.

 

React.memo를 사용해야 하는 경우

1. 순수 함수 컴포넌트

컴포넌트가 함수형이고, 같은 props가 주어지며 항상 같은 아웃풋을 렌더링한다.

 

2. 자주 렌더링 하는 함수

 

3. 같은 props로 리 렌더링 되는 컴포넌트

리 렌더링 될 때 주로 같은 props가 주어지는 경우

 

4. 컴포넌트가 props 비교를 필요로 하는 많은 UI 요소를 가지고 있는 경우

 

만약 위에서 언급한 상황에 일치하지 않는다면 React.memo()를 사용할 필요가 없을 가능성이 높으며 성능적인 이점을 얻지 못하는 상황이라면 오히려 사용하지 않는 것이 좋다.

 

렌더링 될 때마다 props가 다른 경우가 대부분인 컴포넌트라면, 메모이제이션의 이점을 얻기 힘들다. props가 자주 변하는 컴포넌트를 React.memo로 감싸더라도, React는 아래의 두 가지 작업을 렌더링 할 때마다 실행할 것이다.

 

1. 이전 props와 다음 props의 동등 비교를 위해 비교 함수를 수행한다.

2. 비교 함수는 대부분의 경우에 false를 반환할 것이므로, React는 이전 렌더링 내용과 다음 렌더링 내용을 비교한다.

 

어차피 props가 자주 or 매번 변경된다면, 불필요한 비교과정만 추가되는 것일 뿐이므로 사용하지 않는 것이 좋다.