더 빠른 반응 앱을 위한 팁

이것은 더 나은 성능을 위해 React 애플리케이션에서 구현할 수 있는 팁과 기술의 목록입니다.

가상화 또는 윈도우잉

경우에 따라 행이 많은 상당한 크기의 테이블이나 목록을 표시해야 할 수도 있습니다. 모든 단일 항목을 한 번에 로드하면 대량의 데이터 세트를 렌더링하면 애플리케이션의 성능에 영향을 미칩니다. 이것은 특히 더 복잡한 레이아웃을 가진 덜 강력한 장치에서 브라우저를 정지시키거나 충돌시킬 수 있습니다.

이 경우 가상화 또는 "윈도우잉"이 훌륭한 솔루션이 될 것입니다. 사용자에게 보이는 항목만 렌더링하는 기법입니다.



좋은 소식은 이 솔루션을 직접 구현할 필요가 없으며 react window 및 react virtualized과 같은 널리 사용되는 윈도우 라이브러리를 사용할 수 있다는 것입니다.

지연 로딩 구성 요소

지연 로딩은 애플리케이션의 렌더링 시간을 최적화하고 가속화하는 훌륭한 기술입니다.
지연 로딩의 개념은 필요할 때만 구성 요소를 로드하는 것입니다.

React는 React.lazy API와 함께 번들로 제공되므로 동적 가져오기를 일반 구성 요소로 렌더링할 수 있습니다. 그래서 대신에
다음과 같이 일반 구성 요소를 로드합니다.


다음과 같이 할 수 있습니다.

종속성 최적화

소프트웨어 개발에서 종종 간과되는 한 가지 측면은 프로그래머가 오픈 소스 라이브러리 및 패키지에 얼마나 의존하는지입니다.
바로 사용할 수 있는 코드.
때로는 처음부터 코드를 작성하거나 한 프로그램에서 다른 프로그램으로 코드를 복사하여 붙여넣는 대신 너무 많은 경우가 있습니다. 일부 프로그래머는 여전히 종속성이라고 하는 것에 의존합니다.
예를 들어, lodash 라이브러리입니다. 라이브러리의 100개 메서드 중 3개만 필요하다고 가정해 보겠습니다. 최종 번들에 모든 추가 메서드를 포함하는 것은 최적이 아닙니다.lodash-webpack-plugin를 사용하여 사용하지 않는 기능을 제거하고 빌드를 사용자 정의할 수 있습니다. 이렇게 하면 더 작은 라이브러리 빌드가 생성됩니다.
애플리케이션 번들 크기를 최적화할 때 종속성에서 실제로 얼마나 많은 코드를 활용하고 있는지 확인하는 것이 좋습니다. 더 이상 사용되지 않는 종속성을 모니터링하고 제거하는 것도 좋은 생각입니다.

Sometimes the best dependencies is no dependencies at all

불필요한 구성 요소 렌더링 방지

불필요한 리렌더링 리액트 컴포넌트는 리액트에서 흔히 발생하는 문제입니다. 구성 요소가 다시 렌더링되면 react는 기본적으로 하위 구성 요소도 다시 렌더링합니다. 이렇게 하면 앱 속도가 느려지고 사용자가 좌절하게 되며, 아무도 느리고 반응이 없는 앱을 사용하고 싶어하지 않습니다.
이러한 일이 발생하지 않도록 기능적 구성 요소는 React.memo를 사용하여 구성 요소가 해당 소품이 변경될 때만 다시 렌더링되도록 할 수 있습니다.
클래스 기반 구성 요소는 React PureComponent를 활용하여 동일한 효과를 얻을 수 있습니다.

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

상점 대신 상태를 로컬로 유지

응용 프로그램의 상태 대부분을 상태 관리 라이브러리에 버리기 쉽습니다.
구성 요소의 상태를 로컬로 유지하는 것이 바람직하며 글로벌 저장소를 사용하는 것보다 항상 빠릅니다.

이것은 데스크톱 컴퓨터에 큰 피해를 주지 않을 수 있지만 작은 모바일 장치는 명백한 성능 저하를 겪을 것입니다.

따라서 저장소에 상태를 저장하기 전에 항상 피할 수 있는지 확인하십시오.

반응 단편

React는 모든 구성 요소에 대해 주변 컨테이너가 필요합니다. 그러나 React 16 이후에는 React Fragments 때문에 더 이상 필요하지 않습니다.
프래그먼트는 메모리에 좋은 추가 불필요한 DOM 노드 생성을 방지합니다. 우리가 저장할 수 있는 모든 작은 노드가 쉽게 추가되어 React 애플리케이션을 더 깨끗하고 빠르게 만듭니다.

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

결론

React 속도 최적화에 대한 이 팁을 제공하는 것이 이 게시물의 목적에 도움이 되었기를 진심으로 바랍니다. 이러한 팁을 올바르게 실행하면 React 앱의 속도 측면에서 놀라운 업적을 달성할 수 있습니다.