state, props

React - state

Reactでは、Stateを使用して構成部品の状態を値として保存します.
stateは構成部品で定義および使用され、必要に応じて変数形式で変更できます.

1.関数構成部品でstateを使用する

import React, { useState } from 'react'; //import 철수
function Parents() {
  let [name, setName] = useState(); //state

  return (
    <div>
      <h1>state 사용해보기</h1>
      <h3>{name} 야 밥먹어라</h3>
    </div>
  );
}
export default Parents;

関数構成部品でstateを使用する場合は、usState Hookを使用します.

stateを使用するには、usStateをインポートする必要があります.

宣言は

配列の形式で、最初の要素は状態の名前を宣言し、2番目の要素は操作状態の関数名を宣言します.

ステータスの初期値をパラメータとして

usState関数に入れます.

の上のコードでは、関数をsetNameとして定義し、stateの名前を使用してnameというステータスを操作できます.

上記のコード

のname stateは値を定義していないため、h 3タグに名前は表示されません.

name stateに希望する名前を入力するには、どのような方法を使用しますか?

2.ステータスの変更

空のname stateの内容を変更する場合はsetName関数を使用します.
stateを使用してステータス値を設定するのは、コンポーネント内の要素にステータス値を反映させ、データ変更時にUIで効率的に変更を表すためです.
stateを操作する関数を使用してstateを動的に変更する方法について説明します.

import React, { useState } from 'react'; //import 철수
function Parents() {
  let [name, setName] = useState(''); //state

  const callName = () => {
    setName('철수');
  };
  return (
    <div>
      <h1>부모 컴포넌트 입니다.</h1>
      <button onClick={callChild}>밥먹으라하기</button>
      <h3>{name} 야 밥먹어라</h3>
    </div>
  );
}
export default Parents;

setName関数に、パラメータとして文字列「元に戻す」を入力するcallName関数が追加されました.

クリックイベントを受信するボタンが生成され、クリック時にcallName関数が実行されます.

ボタンをクリックするとsetName関数が実行され、name stateは文字列「元に戻す」を「元に戻す」状態に維持します.

ボタンをクリックすると、h 3タグの{name}セクションに「元に戻す」という文字列が表示されます.

上記の例に示すように、stateは、素子を反映してその状態に反映するために必要なstateを設定し、素子の動作をUIに反映するために使用される.

3.親コンポーネントから子コンポーネントへ

リトラクトでページを作成すると、構成部品のサブアイテムとして複数の構成部品が使用され、構成部品を効率的に管理できます.
親コンポーネントから子コンポーネントに必要な情報を渡す場合はpropsを使用します.
propsは、親構成部品から子構成部品にデータを渡し、親構成部品から伝達された情報をオブジェクトとして含むために使用されます.

// ** Parents 컴포넌트 **
import React, { useState } from 'react';
import Child from './Child';
function Parents() {
  let [name, setName] = useState('');

  const callChild = () => {
    setName('철수');
  };
  return (
    <div>
      <h1>부모 컴포넌트 입니다.</h1>
      <button onClick={callChild}>밥먹으라하기</button>
      <Child name={name} />
    </div>
  );
}
export default Parents;

// ** Child 컴포넌트 **
import React from 'react';

function Child(props) {
  return (
    <div>
      <h2>자식 컴포넌트 입니다.</h2>
      <h3>{props.name} 야 밥먹어라</h3>
    </div>
  );
}
export default Child;

Parents素子のh 3マーカーをChild素子として素子化し、サブ素子として追加した.

<Child name={name} />は、name stateをnameというpropertyに転送し、以下に示す.

Child素子のパラメータとしてpropsを受け入れます.

propsには、親コンポーネントが渡すname state情報が含まれます.

props.propsオブジェクトのフォーマットはnameと同じです.

これは、既存のサブコンポーネントがないコードのようなもので、最初は名前が表示されませんでしたが、ボタンをクリックすると、画面に「チョルス、ご飯を食べましょう」という文字列が表示されます.
上記のコードはname stateをpropsとしてサブエレメントに渡すため、サブエレメントにname stateがなくてもstateの変更は同じ反映されることがわかります.
stateとpropsは最もよく使われる概念であり,reactのコア−素子動作であるため,それらを十分に熟知することが重要である.