[react]第3週-component&props

Reactプロジェクトフォルダ構造

public:静的(静的)リソースが存在するフォルダ

index.html:仮想DOM用htmlファイル.index.jsに対応するhtmlテンプレートファイル.ブラウザに表示される

画面

manifest.json:

Webサイトは、アプリケーションストアを必要とせずにデバイスのホームページにインストールできます.

src:応答を処理するフォルダ

コンポーネント:構成部品ファイルが存在するフォルダ

App.js:構成部品を定義するプログラム.画面表示コードを作成するファイル

App.css: App.jsのcssファイル

index.js:htmlテンプレートとJavaScriptのコンポーネントの組み合わせレンダリング

👉 App.js(コンポーネント)の内容はindexです.jsでインデックスを作成します.html(画面)に表示されます!

先週の復習

構成部品

属性を表すpropsをinputとし、UIがどのように表示されるべきかを定義するReact 엘리먼트をoutputとする関数

は概念的にJavaScriptの関数

に類似している.

反応要素は、関数またはクラスの

として作成することができる.

の再利用が容易

頭文字大文字

srcフォルダ内にコンポーネントフォルダ

を作成する.

class Subject extends Component {
  render() {
    return (
      <header>
        <h1>WEB</h1>
        world wide web!
      </header>
    );
  }
}

function App() {

  return (
    <div className="App">
      {/* 컴포넌트 사용 */}
      <Subject />
    </div>
  );
}

export default App;

props

プロパティの略は、構成部品に渡される値です.
たとえば、アプリケーション・コンポーネントでHelloコンポーネントを使用する場合にageという値が渡されると仮定すると、propsはオブジェクトとして渡され、props.ageを使用してageの値が検索される.
App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello age={10} />
  );
}

export default App;

Hello.js

import React from 'react';

function Hello(props) {
  return <div>{ props.age }</div>;
}

export default Hello;

state

構成部品のダイナミック値

ステータス変更カウンタの作成

構成

App.js -> Props.js伝達num値(props)

Prop.js出力の{props.num}値は

である.
App.js

import { useState } from "react";
import Props from "./component/Props";
import "./App.css";

function App() {

  let [num, setNum] = useState(0); // 변수 num의 초기값 = 0
  
  function increase() {
    setNum(++num); // 먼저 연산 후 num 값 저장
  }

  function decrease() {
    setNum(--num);
  }

  return (
    <div className="App">
      <button onClick={ increase } className="btn">increase</button>
      <button onClick={ decrease } className="btn">decrease</button>
      {/* num 값을 Props 컴포넌트에 전달 */}
      <Props num={num} />
    </div>
  );
}

export default App;

Props.js

export default function Props(props) {

  return (
    <div>
      <h1>Count { props.num }</h1>
    </div>
  );
}

結果

参考資料

プロジェクト構造:https://mjn5027.tistory.com/21
図書『反応200剤』