React 인터페이스의 성능을 향상시키는 10가지 기술

전반적으로 말하면 React는 보기의 메모리 (in-memory) 모델을 유지보수하여 작동합니다.이것은 일반적으로 가상 DOM이라고 불리며 실제 DOM이 언제 업데이트되어야 하는지를 결정하는 데 사용됩니다.그러나 실제 DOM을 조작하는 데 비용이 많이 들기 때문에 필요할 때만 DOM을 업데이트하여 전체 성능을 향상시켜야 합니다.
React 프레임워크에서 최고의 성능을 얻고 React 인터페이스의 응답 효율을 높이기 위해 본고는 각종 기능 함수(예를 들어 Suspense)와 클래스 기반 구성 요소에서 출발하여 자주 사용하는 DOM을 위한 기술과 방법 10가지를 토론하고자 합니다.

shouldComponentUpdate

클래스 기반 구성 요소를 작성할 때 shouldComponentUpdate () 의 라이프 사이클 방법을 다시 쓸 수 있습니다.이 방법의 목적은 대상 구성 요소가 다시 렌더링되어야 하는지 명확하게 설명하는 데 있다. (re-rendering)주의해야 할 것은 실제 DOM을 업데이트하는 생명 주기에 렌더링하는 비용이 매우 크다는 것이다.따라서 구성 요소의 속성 (props) 이나 상태 (states) 가 변할 때만 React가 렌더링을 실행해야 합니다.전체 호출로 인한 비용을 피하기 위해 렌더링을 건너뛸 수도 있습니다.
shouldComponentUpdate의 서명과 조작은 비교적 간단합니다.다음 간단한 예시에서 구성 요소는 어떤 지정한 트리거 조건에서 업데이트를 실행해야 하는지 알아야 한다.이 방법은 수신된 속성과 상태를 매개 변수로 하고true로 되돌아오면 구성 요소는 렌더링을 실행합니다. 그렇지 않으면 렌더링을 촉발하지 않습니다.

shouldComponentUpdate(nextProps, nextState) { 
    if (this.props.significant !== nextProps.significant) { 
      return true; 
    } 
    return false; 
  } 

상술한 코드 세그먼트는 주로 속성을 검사하지만 상태에도 적용된다.물론 실제 응용에서 속성이나 상태에 대한 검사를 하고true로 돌아갈지 여부를 판정하는 것은 더욱 복잡할 수 있다.간단한 얕은 값 (shallow value) 을 비교하려면 다음 기술인 Pure Component 를 사용하십시오.

PureComponent

구성 요소가 속성과 상태만 간단하게 비교해야 한다면 (shallowcomparison,https://stackoverflow.com/a/5703797/467240), 렌더링이 필요한지 확인하려면 PureComponent와 같은 확장 기본 클래스인 class MyComponent extends React를 사용할 수 있습니다.PureComponent.이것은 실현할 수 있다. 얕은 층 비교를 통해 속성이나 상태에 아무런 변화가 발견되지 않았을 때render () 는 호출되지 않는다.말 그대로 PureComponent는 속성이나 상태가 바뀔 때만 출력의 변경을 촉발하기 때문에 이 구성 요소는 순수하고 부작용이 없습니다.

useEffect

앞의 기교는 클래스 기반 구성 요소에만 적용된다.일반적인 기능성 구성 요소와 비슷한 효과를 내기 위해useEffecthook과 memo 같은 기능성 구성 요소를 사용할 수 있습니다.그 중에서useEffect는shouldComponentUpdate와 비슷한 효과를 가진다. 사용자는 특정한 변수만 변경된 상황에서 특정한 기능을 적용하여 전체적인 변경 비용을 피할 수 있다.다음은 간단한 useEffect 예입니다.

const MyComponent = (props) => { 
  useEffect(() => { 
    console.info("Update Complete: " + props.significantVariable); 
  }, [props.significantVariable]); 
} 

만약props.significantVariable이 변경되었습니다 (즉 변수가 변경되었습니다). 그러면 이 코드가 실행되어 적용됩니다.

React를 사용합니다.memo는 기억을 제공한다

고급 구성 요소로서 memo는 각종 구성 요소를 포장하고 그들의 행위 능력을 확장시켰다.즉, 기능성 구성 요소가 같은 속성을 가지고 있다면, memo는 버퍼링으로 그들의 결과를 기억할 수 있다.따라서 기능성 구성 요소가 속성의 일치 여부를 무시하고 맹목적으로 렌더링을 실행하는 것을 효과적으로 방지할 수 있다.
PureComponent가 속성에만 주목하는 행위를 모방하기 위해서 우리는 다음과 같은 코드 세그먼트를 사용하여 일부 기능성 구성 요소를 포장하여 속성의 변경만 검사하고 상태가 아닌 것만 검사할 수 있다.속성과 상태가 다르기 때문에 비교를 통해props.qote가 변경되지 않은 것으로 인정되면 대응하는 구성 요소도 다시 렌더링되지 않습니다.

const MyComponent = (props) => { 
  return <span>props.quote</span> 
} 
export default React.memo(SomeComponent) 

동시에, React.memo는 두 번째 매개변수를 통해 함수의 등가성을 확인할 수 있습니다.

export default React.memo(MyComponent, (oldProps, newProps) => {} ); 

상술한 코드를 통해 우리는 용례의 새로운 속성과 낡은 속성을 비교할 수 있다.속성이 같으면 이 함수는true를 되돌려줍니다.주의해야 할 것은 우리가 앞에서 소개한shouldComponent Update와 구성 요소가 업데이트된 것을 발견했을 때true로 되돌아오는 것과는 정반대이다.

창화(목록 가상화)

이제 우리는 기능성과 클래스 구성 요소에 동시에 적용되는 기술인 윈도우화 (windowing) 에 주의를 기울일 것이다.예를 들어 수천 줄의 기록을 가진 데이터 테이블이나 목록이 있습니다. 이 테이블에 대응하는 응용 인터페이스에 대량의 데이터 집합을 표시하려면'창화'방식으로 데이터를 조회해야 합니다.즉, 우리는 한꺼번에 일부 데이터만 불러오고 표시하는 형식을 통해 대량의 데이터가 끊기는 것을 방지하는 사용자 인터페이스(UI)를 사용할 수 있다.이를 위해react-window 라이브러리에 자주 사용할 수 있습니다 (참조--https://github.com/bvaughn/react-window).

함수 캐시

함수 호출의 비용이 너무 높다고 생각되면 캐시를 고려할 수 있습니다.만약 각 파라미터가 같고 캐시가 결과를 되돌려줄 수 있다면, 우리는 데이터에 대한 호출을 피하기 위해 메모리 캐시 (memorizedcache) 방식을 사용할 수 있습니다.물론 함수 캐시가 실제로 적용되는지는 함수의 구체적인 특징에 달려 있다.

지연 로드 및 코드 분할

지연 로딩이란 필요할 때만 데이터를 불러오는 것을 말한다.React 16.6은 React를 도입했습니다.lazy (), 사용자가 코드를 필요에 따라 분할할 수 있도록 합니다.이것은 일반적인 구성 요소 문법을 사용하는 동시에 불러오는 지연의 의미를 얻을 수 있다는 것을 의미한다.
물론 React 16.6 이전 버전은 코드 분할을 실현할 수 없는 것이 아니라 대형 코드 라이브러리를 처리할 때 비교적 번거롭다.

동시 모드, Suspense 및 useDeferredValue

React16의 가장 현저한 새로운 기능으로서 병렬 모드는 사용자가 Suspense 구성 요소를 사용하여 데이터 획득과 렌더링의 병렬 처리를 실현하고 응용 프로그램의 실제 감지 성능을 크게 향상시킬 수 있다.
우리는 Suspense 구성 요소로 데이터의 획득 영역을 정의할 수 있을 뿐만 아니라useDeferredValue 등 React16에서 가져온 새로운 구성 요소를 사용하여 자동 제안 (auto-suggest) 등 작업 방식을 향상시키고 사용자가 잘못된 입력 등 불량한 체험에 부딪히지 않도록 할 수 있다.

데이터 손실 방지(Debounce) 및 스트림 제한(throttle)

대부분의 경우, 우리는 debounce나throttle 함수를 통해React의 병렬 모드를 더욱 잘 처리할 수 있다.코드 라이브러리가 이전 버전의 렌더링 엔진으로 잠겨 있고 병렬 모드를 열 수 없을 때, 이러한 함수는 데이터를 얻는 과정에서 혼란스러운 국면을 효과적으로 피할 수 있습니다.
예를 들어 사용자가 데이터를 입력하는 동시에 실시간으로 입력을 얻으려면 키마다 요청을 터치하기 때문에 전체적인 성능이 크게 떨어진다.이것에 대해 우리는 debounce나throttle 함수를 사용하여 이런 문제를 완화시킬 수 있다.

분석(Profiling)

위에서 언급한 기술을 제외하고 우리는 응용 프로그램에 대한 성능 분석을 통해 성능 병목의 소재를 파악하고 상술한 개선 방법의 실제 효과를 검증할 수 있다.현재 크롬이나 Firefox 같은 브라우저는 내장된 분석기(profiler)를 가지고 있다.React의 개발 모드 (dev mode) 를 사용하면 분석기를 통해 사용 중인 특정 구성 요소를 볼 수 있습니다.이것은 네트워크의 상태를 검사하고 백엔드 호출의 지연을 식별하는 데 매우 실용적이다.따라서 프런트엔드 JavaScript의 코드 문제인지 아니면 백엔드 복구가 필요한 결함이 있는지 명확하게 판단할 수 있습니다.
또한 React 16.5 이상의 버전은 DevTools Profiler https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html 라는 도구를 제공합니다.이것은 병발 모델에 있는 각 함수를 위해 더욱 상세한 서비스 기능과 통합을 제공할 수 있다.여러 가지 방법을 통해 응용 프로그램의 행위 활동에 대해 슬라이스 (slice) 와 슬라이스 (dice) 를 할 수 있다.
또 다른 Profiler 구성 요소는 구성 요소의 렌더링 라이프 사이클에 대한 다양한 세부 정보를 보여 줍니다.

React 운영 환경 구축

마지막으로, 생산 환경을 배치할 때, 생산 환경 구축 (productionbuild) 의 간소성을 확보하고, 개발 디버깅 과정의 로그 기록을 포함하지 않아야 합니다.물론 구체적인 절차는 당신이 사용하는 구축 도구에 달려 있습니다.
이상은 React 인터페이스의 성능을 향상시키는 10가지 기교의 상세한 내용입니다. React 인터페이스의 성능을 향상시키는 데 관한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!