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 => 
{user.name}
);
};

// Inside a parent component:

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

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

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

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

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

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

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

  return ;
};

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

함정 2: 인라인 함수나 객체를 소품으로 전달

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

작업: 구성 요소 외부에 함수 및 개체를 선언하거나 메모 후크를 사용합니다.

// Avoid this:
 console.log("clicked")} />

// Instead:
const handleClick = useCallback(() => console.log("clicked"), []);

함정 3: React.memo 사용 실패

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

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

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

작동 이유: 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. 키를 현명하게 사용하세요

목록을 렌더링할 때 각 항목에 안정적이고 고유한 키 소품이 있는지 확인하세요. 이는 변경된 항목을 식별하여 React가 다시 렌더링을 최적화하는 데 도움이 됩니다.

3. 마운트되지 않은 구성 요소를 다시 렌더링하지 마세요

이로 인해 메모리 누수 및 성능 문제가 발생할 수 있습니다. 마운트 해제된 구성요소에서 다시 렌더링되는 것을 방지하려면 useEffect 정리 기능을 사용하세요.

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

7. 요약: Master React 재렌더링

요컨대 React 재렌더링은 성능 문제의 숨겨진 원인이 될 수 있지만 올바른 기술을 사용하면 불필요한 재렌더링을 방지하고 앱 속도를 유지하며 원활한 사용자 경험을 보장할 수 있습니다.

• 함수와 개체를 메모하여 하위 구성 요소를 다시 렌더링하지 않도록 하세요.
• React.memo를 사용하여 순수 구성요소에서 불필요한 재렌더링을 중지하세요.
• React DevTools를 활용하여 성능 병목 현상을 추적, 이해, 디버깅합니다.

8. 실제 적용: 의도적인 재렌더링을 통한 성능 향상

다음번에 React 앱을 최적화할 때 각 재렌더링에 대해 비판적으로 생각해 보세요. 꼭 필요한가요? 이 기능을 메모하면 어떻게 되나요? 이러한 전략을 적용하면 더 간결하고 빠른 React 코드를 작성하고 가장 숙련된 개발자라도 걸림돌이 되는 일반적인 함정을 피할 수 있습니다.

마지막 생각: 이제 React 리렌더링의 모든 것을 배웠으므로 이러한 최적화를 자신의 앱에 적용해 보세요. 더 나은 성능을 볼 수 있을 뿐만 아니라 확장 가능하고 유지 관리 가능한 React 코드 작성에 대한 자신감도 얻을 수 있습니다!