props를 퍼뜨릴 때 알려지지 않은 HTML 속성을 추가 할 위험이 있습니다. 이는 나쁜 습관입니다.
알 수없는 HTML 속성 'flag'를 DOM 요소에 추가하려고 합니다.
const Sample = () => <Spread flag={true} className="content" />;
const Spread = (props) => <div {...props}>Test</div>;DOM 속성을 위해 특별히 props를 생성함으로써 안전하게 전파 할 수 있습니다.
const Sample = () => <Spread flag={true} domProps={{ className: "content" }} />;
const Spread = (props) => <div {...props.domProps}>Test</div>;또는...rest와 함께 prop 구조분해할당(destructuring)을 사용할 수 있습니다.:
const Sample = () => <Spread flag={true} className="content" />;
const Spread = ({ flag, ...domProps }) => <div {...domProps}>Test</div>;노트:
순수한 컴포넌트(PureComponent)를 사용하는 시나리오(scenarios)에서 업데이트가 발생하면domProps가 변경되지 않은 경우에도 컴포넌트를 다시 렌더링합니다. 이는 순수한 컴포넌트가 객체를 얕게 비교(shallowly compares)하기 때문입니다.