📘

【初心者向け/ITスクール 86日】React

に公開
React
tech

はじめに

今日は、ITスクールに通った86日目の日です。

今日もReactを勉強しました。Vanilla JSより何倍も速くて、効率が上がる気がしました！

React

動的UI

  1. html,cssで事前にUIを完成します。(静的ページのように事前作成）
  2. UIの状態をStateに保存します。
fuction App(){
let [modal,setModal] = useState(false);
.
.
{ modal == true ? <Modal/>:null      }
.
.
);
}
}

.
.
function Modal(){
  return(...)
}
  1. true, falseでスイッチのように変換すれば、UIをON/OFFすることが可能です。

Props

Parents componentのデーターをChild Compentにデーターを転送する方法。

<Modal 作名={State名}/>

function Chile(props) {
  return (
    <div className='modal'>
      <h4>{props.作名}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

Child Componentのパラメータにpropsを入れ、Parent Componentから指定した作名でdataをbindingします。

Discussion