내용물

React Top Level API

Component Rendering

API Definition

Rendering On a Specific Type of Change

Conclusion

REPL

References

반응 최상위 API

React 라이브러리에는 최상위 수준 범위의 일부 기능이 포함되어 있습니다. 이 중에는 useState , useCallback 등과 같은 내장 후크와 React Elements를 직접 조작하기 위한 다른 기능이 있습니다. 이전 게시물The React Top Level API에서 다루었습니다.

컴포넌트 렌더링

기본적으로 React는 state 또는 props 에 변경 사항이 있을 때마다 구성 요소 렌더링을 트리거합니다. React.memo를 사용하면 소품 변경 프로세스를 살펴볼 수 있는 방법을 제공하여 트리거된 렌더링props을 제어할 수 있습니다.
React.memo는 고차 구성 요소(HOC)로 구성 요소를 래핑하고 props가 다른지 여부를 반응에 알리는 함수를 정의하여 업데이트/재렌더링 여부를 제어할 수 있습니다. 새 렌더링 트리거

위의 작업은 소품이 변경될 때마다 렌더링할 필요가 없는 복잡한 구성 요소에 유용합니다.

API 정의

The React Docs은 React.memo HOC에 대해 다음 예를 제공합니다.

const MyComponent = (props) => {
  /* render using props */
}

const areEqual = (prevProps, nextProps) => {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}

const MyComponentMemo = React.memo(MyComponent, areEqual);

구성 요소MyComponent는 props가 변경될 때마다 렌더링되지만 React.memo를 사용하면 새 props가 오래된 소품

그런 다음 areEqual 대신 React.memo를 사용하여 구성 요소가 렌더링되는 시기를 제어할 수 있습니다.

특정 유형의 변경에 대한 렌더링

MyComponentMemo에서 전달되는 시간을 보여주는 특정 구성 요소MyComponent가 있다고 가정합니다.

import './App.css'
import React, { useState, useEffect } from 'react'

interface TimeDisplayProps {
  time: number
}

const TimeDisplay: React.FC<TimeDisplayProps> = ({ time }) => {
  const display = new Date(time).toString()

  return <h1>{display}</h1>
}

export default function App() {
  const [time, setTime] = useState(Date.now())

  useEffect(() => {
    const handle = setInterval(() => {
      setTime(Date.now())
    }, 100)

    return () => {
      clearInterval(handle)
    }
  }, [])

  return (
    <main>
      <TimeDisplay time={time} />
    </main>
  )
}

우리의 경우 TimeDisplay 구성 요소는 시간을 초까지만 표시하므로 밀리초 수준의 변경은 구성 요소에 중요하지 않으므로 App의 차이가 이전과 유사한지 확인하여 해당 렌더링을 절약할 수 있습니다. 렌더링TimeDisplay
시간이 약 5초 지연되는 것이 허용된다고 가정하고 다음 렌더링의 소품을 이전과 비교하고 서로 5초 이내에 있으면 반환하는 time라는 함수를 정의할 수 있습니다.

const areTimesWithinFiveSeconds = (prev: TimeDisplayProps, next: TimeDisplayProps): boolean => {
  const diff = next.time - prev.time

  return diff < 5000
}

time에서 위의 함수를 사용하여 불필요한 렌더링을 방지하는 areTimesWithinOneSecond 구성 요소의 버전을 정의할 수 있습니다.

const TimeDisplayMemo = React.memo(TimeDisplay, areTimesWithinFiveSeconds)

그런 다음 React.memo 구성 요소의 드롭인 교체로 사용할 수 있습니다.

export default function App() {
  const [time, setTime] = useState(Date.now())

  useEffect(() => {
    const handle = setInterval(() => {
      setTime(Date.now())
    }, 100)

    return () => {
      clearInterval(handle)
    }
  }, [])

  return (
    <main>
      <TimeDisplayMemo time={time} />
    </main>
  )
}

결론

위의 구현에서 구성 요소를 다시 렌더링할 필요가 없는 경우 TimeDisplay를 사용하여 구성 요소의 렌더링을 지연할 수 있으므로 수행해야 하는 렌더링 수를 줄여 성능을 향상시킬 수 있음을 알 수 있습니다.

REPL

위의 예가 포함된 REPL은 아래에서 볼 수 있습니다.

참조

The React Docs