1. React.memo()
-
유저들은 반응이 빠른 UI를 선호한다. 100ms 미만의 UI 응답 지연은 유저들이 즉시 느낄 수 있고, 100ms에서 300ms가 지연되면 이미 유저들은 상당한 지연으로 느낀다.
-
UI 성능을 증가시키기 위해, React는 고차 컴퍼넌트(Higher Order Component, HOC)
React.memo()를 제공한다.- 렌더링 결과를 메모이징(Memoizing)함으로써, 불필요한 리렌더링을 건너뛴다.
React.memo()란?
-
React는 먼저 컴퍼넌트를 렌더링(rendering) 한 뒤, 이전 렌더된 결과와 비교하여 DOM 업데이트를 결정한다.
-
만약 렌더 결과가 이전과 다르다면, React는 DOM을 업데이트한다.
-
다음 렌더링 결과와 이전 결과의 비교는 빠르다. 하지만 어떤 상황에서는 이 과정의 속도를 좀 더 높일 수 있다.
-
-
컴퍼넌트가 React.memo()로 래핑 될 때, React는 컴퍼넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.
export function Movie({ title, releaseDate }) {
return (
<div>
<div>Movie title: {title}</div>
<div>Release date: {releaseDate}</div>
</div>
);
}
export const MemoizedMovie = React.memo(Movie);
-
React.memo(Movie)는 새로 메모이징된 컴퍼넌트인 MemoizedMovie를 반환한다.- 한 가지 차이점을 제외하고 원래의 Movie 컴퍼넌트와 같은 결과를 나타낼 것이다.
-
MemoizedMovie의 렌더링 결과는 메모이징 되어있다. 만약 title이나
releaseData같은props가 변경 되지 않는다면 다음 렌더링 때 메모이징 된 내용을 그대로 사용하게 된다.
메모이징 한 결과를 재사용 함으로써, React에서 리렌더링을 할 때 가상 DOM에서 달라진 부분을 확인하지 않아 성능상의 이점을 누릴 수 있다.
2. React.memo()는 언제 사용하는가?
-
같은 props로 렌더링이 자주 일어나는 컴퍼넌트
-
React.memo()는 함수형 컴퍼넌트에 적용되어 같은props에 같은 렌더링 결과를 제공한다. -
React.memo()를 사용하기 가장 좋은 케이스는 함수형 컴퍼넌트가 같은props로 자주 렌더링 될거라 예상될 때이다.- 일반적으로 부모 컴퍼넌트에 의해 하위 컴퍼넌트가 같은 props로 리렌더링 될 때가 있다.
-
3. 언제 React.memo()를 사용하지 말아야 할까
성능 관련 변경이 잘못 적용 된다면 성능이 오히려 악화될 수 있다. React.memo()를 현명하게 사용하라.
-
쓸모없는 props 비교
-
렌더링될 때 props가 다른 경우가 대부분인 컴포넌트를 생각해보면, 메모이제이션 기법의 이점을 얻기 힘들다.
-
props가 자주 변하는 컴퍼넌트를 React.memo()로 래핑할지라도, React는 두 가지 작업을 리렌더링 할 때마다 수행할 것이다.
-
이전 props와 다음 props의 동등 비교를 위해 비교 함수를 수행한다.
-
-
비교 함수는 거의 항상 false를 반환할 것이기 때문에, React는 이전 렌더링 내용과 다음 렌더링 내용을 비교할 것이다.
- 비교 함수의 결과는 대부분 false를 반환하기에 props 비교는 불필요하게 된다.
-
