React에서 기본 소품 렌더 트랩을 피하는 방법

뭐야?

다음과 같은 기본 소품이 있는 구성 요소가 있다고 가정해 보겠습니다.

import React, { useEffect, useState } from "react";

const RerenderChild = ({ value = [] }) => {
  const [valueFromProp, setValueFromProp] = useState([]);

  useEffect(() => {
    setValueFromProp(value);
  }, [value]);

  return (
    <div>
     {/* ...component */}
    </div>
  );
};

export default RerenderChild;

value prop이 null(호출 구성 요소에 의해 설정되지 않음)일 때마다 useEffect로 인해 구성 요소가 무한히 렌더링됩니다. 이것이 기본 소품 렌더 트랩입니다. 우리는 브라우저 콘솔에서 이와 같은 것을 얻습니다.

왜 일어나는가

value 소품에 대한 값을 제공하지 않으면 인수로 제공된 기본값을 사용합니다. 이 경우에는 [] 입니다. 그러면 useEffect 상태를 업데이트하는 valueFromProp 후크가 트리거됩니다. 상태 변경으로 인해 구성 요소가 다시 렌더링됩니다.

이제 구성 요소가 다시 렌더링될 때 기본 값인 새 prop 값을 사용합니다. 그러면 useEffect가 다시 트리거되고 전체 주기가 반복됩니다. 이것이 우리가 무한 루프로 끝나는 이유입니다.

해결책

기본 prop 값을 컴포넌트 정의의 일부로 만들어야 합니다. 우리는 이러한 방법으로 그렇게 할 수 있습니다.

1. defaultProps 속성을 사용합니다.

구성 요소의 defaultProps property 을 사용하여 기본 소품 값을 설정할 수 있습니다. 우리의 구성 요소는 이제

import React, { useEffect, useState } from "react";

const RerenderChild = ({ value }) => {
  const [valueFromProp, setValueFromProp] = useState([]);

  useEffect(() => {
    setValueFromProp(value);
  }, [value]);

  return (
    <div>
      {/* ...component */}
    </div>
  );
};

RerenderChild.defaultProps = {
  value: [],
};

export default RerenderChild;

2. 기본 소품을 상수로 선언합니다.

구성 요소 외부에서 상수를 선언하고 기본 prop 값으로 설정할 수 있습니다.

import React, { useEffect, useState } from "react";

const DEFAULT_VALUE = [];

const RerenderChild = ({ value = DEFAULT_VALUE }) => {
  const [valueFromProp, setValueFromProp] = useState([]);

  useEffect(() => {
    setValueFromProp(value);
  }, [value]);

  return (
    <div>
      {/* ...component */}
    </div>
  );
};

export default RerenderChild;

이것이 무한 루프를 피하는 데 도움이 되기를 바랍니다. 감사합니다 😊.