React 리렌더링 마스터하기: 일반적인 함정을 피하는 방법

1. 소개

상상해 보십시오. 세련되고 기능이 풍부한 React 앱을 방금 구축했는데 갑자기 성능이 저하되기 시작합니다. 버튼이 느리게 느껴지고, 데이터 업데이트에 너무 오랜 시간이 걸리며, 이유를 알 수 없습니다. 이것이 친숙하게 들린다면, 당신은 혼자가 아닙니다. React 리렌더링이 부적절하게 처리되면 성능 문제의 원인이 되는 경우가 많습니다.

React에서 리렌더링을 마스터하는 것은 효율적이고 확장 가능한 애플리케이션을 구축하려는 웹 개발자에게 매우 중요합니다. React 리렌더링의 작동 방식에 대해 자세히 알아보고 성능을 최적화하고, 일반적인 함정을 피하고, React 앱을 엄청나게 빠른 환경으로 전환하기 위한 실용적인 전략을 찾아보겠습니다.

2. React 리렌더링은 어떻게 작동하나요?

React의 재렌더링 메커니즘은 React의 가장 강력한 기능 중 하나입니다. 이를 통해 앱은 상태 또는 소품 변경에 따라 UI를 동적으로 업데이트할 수 있습니다. 하지만 최적화하지 않을 경우 이 과정에서 불필요한 재렌더링이 발생하여 성능 저하가 발생할 수 있습니다.

간단히 말하면 React는 매번 다시 렌더링됩니다.

1. 구성요소의 상태가 변경됩니다.
2. 컴포넌트가 새로운 소품을 받습니다.
3. 상위 구성 요소가 다시 렌더링됩니다.

하지만 구성요소가 너무 자주 다시 렌더링되면 어떻게 되나요? 브라우저는 화면을 다시 그려야 하므로 버벅거리는 애니메이션, 느린 상호작용 및 사용자의 불만을 야기합니다. 이제 스스로에게 물어보세요. 앱이 느리다고 느낀 적이 몇 번이나 있었고 그 이유를 정확히 알 수 없었습니까?

3. 과도한 재렌더링이 성능을 저하시키는 이유

과도한 재렌더링은 도미노 효과를 만들어 전체 앱을 느리게 만듭니다. 다시 렌더링될 때마다:

1. React는 변경 사항을 가상 DOM과 조정합니다.
2. 실제 DOM에 적용할 최소 업데이트를 계산합니다.
3. 브라우저가 화면을 다시 그립니다.

작은 앱에서는 눈에 띄지 않을 수도 있습니다. 그러나 구성 요소가 깊게 중첩되고 상태 관리가 복잡한 대규모 애플리케이션에서는 아무리 작은 불필요한 재렌더링이라도 성능 병목 현상을 악화시킬 수 있습니다.

다음은 간단한 예입니다.

const UserList = ({ users }) => {
  return users.map(user => <div key={user.id}>{user.name}</div>);
};

// Inside a parent component:
<UserList users={users} />

이제 사용자가 변경되지 않은 경우에도 상위 구성 요소가 업데이트될 때마다 이 UserList가 다시 렌더링된다고 상상해 보세요. 여기에 문제가 있습니다. 이렇게 불필요한 재렌더링을 어떻게 방지할 수 있나요?

4. 일반적인 함정(및 이를 피하는 방법)

함정 1: 함수와 객체를 메모하지 않음

상위 구성 요소가 다시 렌더링될 때마다 실제 값이 변경되지 않았더라도 새 함수와 개체 참조가 생성됩니다. 이로 인해 하위 구성요소가 불필요하게 다시 렌더링됩니다.

동작: useCallback 및 useMemo 후크를 사용하여 함수와 개체를 메모합니다.

const ParentComponent = () => {
  const handleClick = useCallback(() => {
    // some function logic
  }, []);

  const userDetails = useMemo(() => ({ name: "Rajesh", age: 30 }), []);

  return <ChildComponent onClick={handleClick} details={userDetails} />;
};

작동 이유: 메모 기능을 사용하면 다시 렌더링할 때마다 새로운 함수 및 개체 참조가 생성되는 것을 방지하여 하위 구성 요소에서 불필요한 렌더링을 줄일 수 있습니다.

함정 2: 인라인 함수나 객체를 Props로 전달

인라인 함수나 개체는 구성 요소가 렌더링될 때마다 생성되므로 실제 값이 변경되지 않았더라도 수신 구성 요소가 다시 렌더링됩니다.

Action: 컴포넌트 외부에 함수와 객체를 선언하거나 메모이제이션 훅을 사용하세요.

// Avoid this:
<ChildComponent onClick={() => console.log("clicked")} />

// Instead:
const handleClick = useCallback(() => console.log("clicked"), []);
<ChildComponent onClick={handleClick} />

함정 3: React.memo 사용 실패

일부 구성 요소는 본질적으로 순수합니다. 동일한 props가 주어지면 항상 동일한 출력을 렌더링합니다. 그러나 React.memo가 없으면 상위 구성 요소가 렌더링될 때 여전히 다시 렌더링됩니다.

조치: 불필요한 재렌더링을 방지하기 위해 기능적 구성 요소를 React.memo로 래핑합니다.

const ChildComponent = React.memo(({ data }) => {
  return <div>{data.name}</div>;
});

작동 이유: React.memo는 props가 변경될 때만 구성 요소가 다시 렌더링되도록 보장하여 중복 렌더링을 방지합니다.

5. React 재렌더링을 추적하고 디버깅하는 방법

'내 구성요소가 왜 다시 렌더링되나요?'라고 궁금해하신 적이 있나요? React DevTools는 렌더링을 추적하고 문제가 발생한 위치를 파악하는 탁월한 방법을 제공합니다.

1. '하이라이트 업데이트' 활성화: 어떤 구성 요소가 다시 렌더링되는지 보여줍니다.
2. '프로파일러' 탭 사용: 렌더링 타이밍을 표시하고 병목 현상을 식별하는 데 도움이 됩니다.

다음과 같은 사용자 정의 후크를 사용하여 재렌더링을 기록할 수도 있습니다.

const useWhyDidYouRender = (componentName, props) => {
  const previousProps = useRef(props);

  useEffect(() => {
    if (previousProps.current !== props) {
      console.log(`${componentName} re-rendered`);
      previousProps.current = props;
    }
  });
};

6. React 재렌더링 최적화 모범 사례

1. 필요할 때 상태를 들어 올리세요. 항상 그런 것은 아닙니다

때때로 상태를 더 높은 구성 요소로 올리면 하위 구성 요소가 불필요하게 다시 렌더링되는 경우가 있습니다. 대신 가능할 때마다 로컬에서 상태를 관리하세요.

2. Use Key Wisely

When rendering lists, ensure each item has a stable, unique key prop. This helps React optimize re-renders by identifying which items have changed.

3. Avoid Re-rendering Unmounted Components

This can cause memory leaks and performance issues. Use the useEffect cleanup function to avoid re-renders in unmounted components.

useEffect(() => {
  return () => {
    // cleanup logic here
  };
}, []);

7. Summary: Master React Re-renders

In short, React re-renders can be a hidden source of performance issues, but with the right techniques, you can prevent unnecessary re-renders, keep your app fast, and ensure smooth user experiences.

• Memoize functions and objects to avoid re-rendering child components.
• Use React.memo to stop unnecessary re-renders in pure components.
• Leverage React DevTools to track, understand, and debug performance bottlenecks.

8. Practical Application: Improving Performance with Intentional Re-renders

Next time you're optimizing a React app, think critically about each re-render. Are they necessary? What happens if you memoize this function? By applying these strategies, you’ll be writing leaner, faster React code and avoiding the common pitfalls that trip up even the most experienced developers.

Final Thought: Now that you've learned the ins and outs of React re-renders, go ahead and apply these optimizations to your own apps. You'll not only see better performance but also gain confidence in writing scalable, maintainable React code!

위 내용은 React 리렌더링 마스터하기: 일반적인 함정을 피하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!