[TIL]21.05.03

Reactのアイテムとステータスとは?
props(property of component)
:Props外部から渡される値、不変の値(勝手に変更できない値)、親コンポーネントから渡される値(性別、名前など)
客体形態であり、読書に用いられる.
EX)

const setName = (props) => {
	<h1>{props.name}</h1>
	<div>{props.content}</div>
}

Export default const App = () => {
	<setName name='CAELIN' content='missin u'/>
}

State(ステータス...)
:構成部品の内部で変更可能な値(領域の減少、空きの減少など)
useStateを使用してstate変数を宣言できます.state変数はReactの終了時に消えません.

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

import useState from 'Reate'; 
const [content, setContent] = useState(0);


const handleContent = (e) => {
	setContent(e.target.value);
}
const handleButtonClick = (e) => {
	alert(value);
}

const App = () => {
	<input type="text" onChange{handleContent}></input>
	<button onClick={handleButtonClick}>Button</button>
}

Export default App;

これにより、イベントハンドラを使用してstateの値を変更できます.
このようにReactは状態に対応するデータを個別にStateとして管理することを希望し,ReactがStateを制御できる素子をControlled Componentと呼ぶ.
このインタラクティブな一方向データストリームは非常に重要である.子構成部品は、親構成部品のステータスまたはデータを使用できます.このような上から下へのデータストリームを一方向データストリームと呼ぶ.また、各構成部品間のデータが重複している場合は、親構成部品を作成し、その親構成部品に重複したデータのサブ構成部品を配置し、一方向データストリームを使用してステータスをサブ構成部品間で重複させず、親構成部品からインポートして使用することが望ましい.