Props

Props特性

素子を表す속성(property).
propsは、Webアプリケーションのコンポーネントのプロパティに相当する外部(性別や名前など)から渡される値です.

親構成部品から渡される値.
reactコンポーネントはJavaScript関数とクラスであり、propsを関数の伝達パラメータ(arguments)としてユーザーに渡し、画面にどのように表示されるかを記述するreact要素を返します.したがって、初期レンダリング時に画面に出力するデータの初期値として、構成部品を使用することができます.

客体形態
propsは객체の形状を有し、任意のタイプの値をpropsとして伝達することができる.

propsはread-only
propsは性別や名前のように外部から伝達される不変の値である.したがってpropsは自由に変更できない読み取り専用オブジェクトとなる.

How to use props

props를 사용하는 방법は、以下に示す3つのステップに分けられる.

サブコンポーネントに渡す値(データ)と属性を定義します.

propsを使用して、定義された値と属性を渡します.

に登録して受け取ったアイテム.

<Component attribute={value} />
  		=> {attribute:value}
		=> props.attribute

<Component>태그와 태그 사이도 전달 가능해요 !</Component>
		=> props.children

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return (
    <div className="App">
      <Learn>{itemOne}</Learn>
      <Learn text={itemTwo} />
    </div>
  );
};

const Learn = (props) => {
  // 전달받은 props 를 아래 <div> tag 사이에 사용하여
  // "React를 배우고 있습니다" 라는 문장이 렌더링되도록 컴포넌트를 완성하세요
  return <div className="Learn">
    	    {props.children}{props.text}
         </div>;
};

State

How to use state

Reactは、stateを処理するためのuseStateという特殊な関数を提供する.
useStateを実行すると、配列が戻り、現在の状態変数を最初のパラメータとし、状態を2番目のパラメータに変更する関数を構造分解として割り当てます.

const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

App.js

import React, { useState } from 'react';
import Color from './Color';

function App() {
  const [state, setState] = useState("red");
  
  return <Color color={state} />;
}
export default App;

Color.js

import React, { useState } from 'react';

function Color(props) {
  return <div>색깔은 {props.color}</div>;
}
export default Color;

サンプルコードを表示し、stateとpropsを理解します.

1. App.js에서 state를 red로 초기화하고 이를 Color 컴포넌트에 color라는 이름의 props를 통해 넘겨준다.
2. Color 컴포넌트에서 파라미터를 통해 props를 받고 props.color를 통해 접근하여 red를 표시한다.

reactは、stateによって要素の状態値を管理し、propsによって要素の属性を伝達し、UIを系統的に組織することができる.

setState

setState()は、要素のstateオブジェクトを更新する.
stateが変更されると、構成部品が再ロードされます.

stateによって管理されるデータはどれですか?

propsまたはstateを使用して、構成部品内のデータを管理できます.
stateは随時更新でき、素子は再ロードされるので、再ロード時に参照するデータはstateに保存することが望ましい.
データに変更があり、再ロード時に変更がない場合は、このフィールドはstateに入る必要はありません.

state管理の良いデータ型

ユーザ入力データ(input、textbox、formフィールド...)

現在または選択されているアイテム(現在のラベル、テーブルで選択されている行...)

サーバから受信データ(オブジェクトリスト)

ダイナミック(モデルを開く/閉じる、サイドバーを開く/閉じる)

stateとpropsの違いは何ですか?

propsおよびstateは、通常のJavaScriptオブジェクトです.
どちらのオブジェクトにもレンダリング結果に影響を与える情報があり、方法に違いがあります.propsは、要素に伝達される.(関数パラメータのように)stateは、構成部品内で管理される.(関数で宣言された変数のように)