TIL defaultPropsとprops.children

1. defaultProps

2. props.children

1. defaultProps

🔑 defaultPropsは、親コンポーネントとして個別のprops値が渡されていないときに表示される初期値を設定するために使用される.
🔑 親コンポーネント(Parent)に渡されたprops値がない場合は、次のようになります.

import React from "react";
import Child from "./Child";

function Parent() {
  return (
    <div>
      자식 컴포넌트로 전달한 props는
      <MyComponent /> // 자식요소로 전달하는 props가 없음
    </div>
  );
}

export default Parent;

サブエレメント出力は、Child.defaultPropsの初期値("디폴트")に設定される.

import React from "react";

const Child = (props) => {
  return <div> {props.missingProps} 입니다. </div>;
}
// missingProps가 부모 컴포넌트로부터 전달되지 않았으므로
// 아래의 defaultProps로 선언한 객체 중 missingProps의 value를 출력

Child.defaultProps = {
  missingProps: "디폴트"
}

export default Child;

どのように活用しますか?

props値が正しく渡されたかどうかを確認するために、defaultProps値「propsが正しく渡されていません.」設定

2. props.children

🔑 props.childrenは、サブアセンブリタグによって囲まれたすべての要素をサブアセンブリに渡す.

// 부모 컴포넌트
import React from "react";
import Child from "./Child";

function Parent() {
  return (
    <Child>
      <h1>Welcome</h1>
      <h2>to my webpage</h2>
    </Child>
  );
}

export default Parent;

// 자식 컴포넌트
import React from "react";

const Child = (props) => {
  return <div> {props.children} </div>;
} 

export default Child;

参考資料

公式文書「PropTypeのタイプチェック」に反応し、
https://ko.reactjs.org/docs/typechecking-with-proptypes.html

反応公式文書「合成vs継承」
https://ko.reactjs.org/docs/composition-vs-inheritance.html

作成中にエラーが発生した場合は、フィードバックに感謝します。開発者に小さなフィードバックを残してほしいです。ありがとうございます:)