Propsを混同している人はみんな入ってきてください.[🐣よいしょ学習反応

一回の理解のPropsは始めます🍿😎

3.3 Props

propsは、構成部品のプロパティを設定するためのpropertiesの略です.

🕵🏻‍♂️まだ知らないの?一度にpropsの本当の一環を理解します!

👨‍🍳親.👧子供にお弁当を作っているつもりでしょう.
親.👨‍🍳 どんなお弁当の材料を用意しておかずを買いに行くか考えますよね
ソースはケチャップ、麺はパスタ、ケチャップはパーマチーズ.ここでpropsの属性は소스, 면, 토핑であり、その属性の値は토마토 소스, 파스타면, 파마산 치즈であるべきである.
すると子供は親の作った弁当を受け取り、ハイキングでは1) 토마토 소스를 파스타 면에 뿌리고 파마산 치즈를 그 위에 올려 먹을 수도、2) 토마토 소스를 파마산 치즈와 섞은 뒤 마지막에 파스타 면을 넣어서 먹을があります.

ここで両親がくれた弁当箱はpropsで、箱の中の소스, 면, 토핑はpropsの属性で、토마토 소스, 파스타면, 파마산 치즈は属性の値です.子供は親から定義された道具を得ることができる.
残念ながら、子供にとって確定したprops属性値は変えられないでしょう...親👨‍🍳もう決めたから!
propsは、コンポーネントをロードするファイルで設定できます.アプリケーション.jsでpropsの値を指定し、componentにします.jsから渡されるprops値を使用します.
簡単な例を見てみましょう.

[3.3-1]Propsプリファレンスの設定

構成部品を呼び出すファイル(親)にpropsを設定します.

//App.js
import React from "react";
import "./App.css";
import NewCool from "./Component";

const App = () => {
  return (
    <div>
      <h1>하루 습관 100일 챌린지</h1>
      {/* props설정하기 : adjective를 props의 속성으로 쓸 수 있겠죠 adjective의 속성값은 "쿨한"이 되겠네요.*/}
      <NewCool adjective="쿨한" />
    </div>
  );
};

export default App;

は、構成部品ファイルで設定したprops値を取得して作成します.

//Component.js

const NewCool = (props) => {
  return (
    <div>
      <div>나의 새롭고 {props.adjective} 컴포넌트</div>
    </div>
  );
};
export default NewCool;

こつこつ—

どうですか.今propsの基礎概念はすべて理解しましたか?!
propsプロパティをコンストレイントするには、さまざまな方法があります.タイプを指定したりpropsプロパティ値を設定したりして、エラーを回避できます.
この部分は次回ご紹介しましょう!
🐣ピチャピチャpropsコンセプト!今は絶対に忘れられないでしょう?