React에서 재렌더링 최적화: 모범 사례

React, 특히 대규모 앱에서 성능 병목 현상의 주요 원인 중 하나는 다시 렌더링입니다. React의 가상 DOM 메커니즘은 DOM을 효과적으로 업데이트하지만 불필요한 재렌더링으로 인해 여전히 성능 문제가 발생할 수 있습니다. 다시 렌더링이 필요한 구성 요소만 다시 렌더링하도록 최적화하여 애플리케이션 성능과 응답성을 향상시킬 수 있습니다.

이 게시물에서는 React 앱에서 무의미한 재렌더링을 줄이는 모범 사례와 React 구성 요소의 효율성을 극대화하는 데 도움이 되는 몇 가지 유용한 힌트 및 방법에 대해 설명합니다.

React의 재렌더링 이해

React의 렌더링 프로세스는 구성 요소 트리를 중심으로 진행됩니다. 구성 요소의 상태나 소품이 변경되면 React는 해당 구성 요소와 해당 하위 구성 요소를 다시 렌더링합니다. 그러나 제대로 관리하지 않으면 불필요한 재렌더링이 발생하여 실제 변경 사항이 적용되지 않은 구성 요소도 다시 렌더링되어 리소스가 낭비될 수 있습니다.

불필요한 재렌더링의 일반적인 원인

구성요소의 출력에 영향을 주지 않는 속성 또는 상태 변경
상위 구성요소가 다시 렌더링되어 하위 구성요소가 소품이 변경되지 않은 경우에도 다시 렌더링됩니다.
렌더링할 때마다 익명 함수 또는 개체 참조가 다시 생성됩니다.

React에서 재렌더링을 최적화하는 핵심 기술

1. 기능적 구성 요소에 React.memo 사용

React.memo는 결과를 메모하여 기능적 컴포넌트에서 불필요한 재렌더링을 방지하는 데 도움이 되는 고차 컴포넌트(HOC)입니다. 구성 요소의 props가 변경되지 않은 경우 React.memo는 해당 구성 요소가 다시 렌더링되는 것을 방지합니다.

const MyComponent = React.memo(({ data }) => {
  console.log('Component rendered');
  return <div>{data}</div>;
});

이 최적화를 통해 MyComponent는 데이터 속성이 변경될 때만 다시 렌더링되어 성능이 향상됩니다.

2. useCallback 및 useMemo를 사용하여 재렌더링 최적화

?? useCallback: 함수를 메모하여 렌더링할 때마다 다시 생성되지 않도록 하는 데 사용됩니다. 이는 특정 값에 의존하는 하위 구성 요소에 함수를 전달할 때 유용합니다.

const handleClick = useCallback(() => {
  // handle button click
}, []);

?? useMemo: 비용이 많이 드는 계산이나 파생 데이터를 메모하여 렌더링할 때마다 다시 계산하는 것을 방지하는 데 사용됩니다.

const expensiveCalculation = useMemo(() => {
  return someHeavyFunction(input);
}, [input]);

이러한 후크는 종속성이 변경될 때만 함수나 값이 다시 계산되도록 보장하여 불필요한 렌더링을 줄입니다.

3. JSX에서 인라인 함수 및 객체 생성 방지

JSX 내부에서 생성된 인라인 함수나 객체는 재렌더링의 일반적인 소스입니다. 구성 요소가 렌더링될 때마다 새로운 함수 또는 개체 참조가 생성되므로 하위 구성 요소에서 불필요한 다시 렌더링이 발생합니다.

// Avoid this pattern
<MyChildComponent onClick={() => doSomething()} />

// Instead, define the function outside the JSX
const handleClick = () => doSomething();
<MyChildComponent onClick={handleClick} />

JSX에서 인라인 함수나 객체 생성을 방지하면 하위 구성 요소가 불필요하게 다시 렌더링되는 것을 방지할 수 있습니다.

4. 큰 구성 요소를 작은 구성 요소로 분할

불필요한 재렌더링을 방지하는 또 다른 기술은 큰 구성 요소를 더 작고 집중된 구성 요소로 나누는 것입니다. 이를 통해 React는 보다 세부적인 업데이트를 수행하고 구성 요소의 일부만 변경된 경우 전체 구성 요소를 다시 렌더링하는 것을 방지할 수 있습니다.

예를 들어 양식과 목록을 렌더링하는 구성 요소가 있는 경우 이를 두 개의 개별 구성 요소로 분할할 수 있습니다. 이렇게 하면 양식을 업데이트해도 목록이 다시 렌더링되지 않으며 그 반대도 마찬가지입니다.

function ParentComponent() {
  return (
    <>
      <FormComponent />
      <ListComponent />
    </>
  );
}

5. 키 Prop을 올바르게 사용하세요

목록을 렌더링할 때 React는 요소를 식별하기 위해 key prop을 사용합니다. key prop을 잘못 사용하면 React가 구성 요소를 잘못 업데이트하거나 다시 렌더링할 수 있습니다.

목록의 각 요소에 고유하고 안정적인 키를 사용해야 합니다.

const items = ['apple', 'banana', 'orange'];
items.map((item) => <li key={item}>{item}</li>);

항목을 다시 정렬하거나 수정할 수 있는 경우 색인을 키로 사용하지 마세요. 예상치 못한 재렌더링이나 잘못된 렌더링이 발생할 수 있습니다.

6. 클래스 구성 요소에서 shouldComponentUpdate 및 PureComponent 사용

클래스 구성 요소의 경우 shouldComponentUpdate는 props나 상태 변경에 따라 구성 요소를 다시 렌더링해야 하는지 여부를 제어할 수 있는 수명 주기 메서드입니다.

또는 props와 상태를 단순하게 비교하여 shouldComponentUpdate를 자동으로 구현하는 PureComponent를 사용할 수도 있습니다.

class MyComponent extends React.PureComponent {
  render() {
    return <div>{this.props.data}</div>;
  }
}

PureComponent는 shouldComponentUpdate에 대한 더 간단한 대안이며 이전과 현재 props 및 상태를 비교하여 불필요한 재렌더링을 방지하는 데 도움이 됩니다.

7. 컨텍스트 API 사용 최적화

React의 Context API를 사용할 때 과도한 사용에 주의하세요. 컨텍스트 값이 변경될 때 모든 소비자가 다시 렌더링하면 불필요한 다시 렌더링이 발생할 수 있기 때문입니다. 이를 방지하려면:

Break down context providers into smaller ones, so only the necessary part of the state triggers updates.
Memoize values passed to the context provider using useMemo to avoid unnecessary re-renders.

const value = useMemo(() => ({ state, updateState }), [state]);

return (
  <MyContext.Provider value={value}>
    {children}
  </MyContext.Provider>
);

8. Lazy Load Components

For performance improvements, especially in large applications, you can lazy load components that are not immediately needed. This can reduce the initial rendering time and the load on the main thread.

React’s React.lazy and Suspense can help in lazy-loading components:

const LazyComponent = React.lazy(() => import('./LazyComponent'));

<Suspense fallback={<div>Loading...</div>}>
  <LazyComponent />
</Suspense>

By lazy-loading components, you delay their rendering until they are actually needed, which reduces unnecessary renders and improves the user experience.

Conclusion

Maintaining performance in React apps requires optimizing re-rendering, especially as the application grows. Avoid needless re-renders by employing strategies like using React.memo, useCallback, useMemo, and breaking up big components into smaller ones. By putting these tactics to good use, you can make sure that your React application stays light-weight, responsive, and simple to update.

위 내용은 React에서 재렌더링 최적화: 모범 사례의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!