React 성능을 최적화 해보자!

https://ko.reactjs.org/docs/optimizing-performance.html

성능 최적화 – React

여기 공식 문서에서 제안하는 방법들이 있는데 그 중 몇 가지를 살펴보자!

 

긴 목록 가상화 하기

앱 내에서 긴 목록(채팅리스트, 트윗, 메시지 등)을 불러와야 하는 경우에 전체를 다 불러오는 것보다

부분 목록만 렌더링함으로써 걸리는 시간과 생성된 DOM의 갯수를 현저히 줄일 수 있다.

 

이게 무슨 말일까?

UI상에 메세지 목록이라는 박스에 필요한 메세지 목록 데이터가 만약 수천개라고 해보자.

하지만 사용자가 보는 화면에 수천개를 한 번에 띄우는 일은 어렵고, 기껏해야 6~10개정도가 사용자 화면에 들어올 것이다. 그렇기때문에 모든 데이터를 불러오지 않고 일부만 렌더링함으로써 시간을 단축하는 좋은 방법이다.

'windowing'기법이라고도 하는데 이 내용을 다루는 글을 가져왔으니 참고바란다!

https://maybe-b50.tistory.com/67

windowing 라이브러리

 

 

새로 업데이트되는 렌더링 피하기

리액트는 컴포넌트의 props나 state가 변경되면 새로 반환된 엘리먼트를 기존의 엘리먼트와 비교하여

실제 DOM 업데이트를 진행한다. 같지 않을 경우 React는 업데이트를 실시하게 된다.

그러나 React가 변경된 DOM 노드만 업데이트하더라도 리렌더링에는 여전히 다소 시간이 걸릴 때가 있다.

 

리렌더링이 시작되기 전에 ShouldComponentUpdate함수가 동작하는데 이 기능을 무시함으로써 성능을 높일 수 있다.

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

ShouldComponentUpdate함수의 기본 구조는 위와 같다. 이를False로 변경해주면

컴포넌트와 그 자식 컴포넌트에서 전체 렌더링 프로세스를 생략할 수 있다.

 

해당 내용을 알기 전에 memo()를 이용하여 렌더링되지 않게 했었는데 이것도 역시 좋은 방법인 것 같다.리액트 공식 홈페이지는 깊게 공부해볼 필요가 있다고 느꼈다. 모르는 게 너무 많고 알면 좋은 점이 넘쳐난다.위에 말한 memo함수가 궁금하신 분들은 아래 링크 확인!!https://ko.reactjs.org/docs/react-api.html#reactmemo