【React 17.0.2】属性(props)と状態(state)

Reactコンポーネントでも親子関係を持つと考えられる

<Parent>
	<ChildOne />
	<ChildTwo>
		<Baby />
	</ChildTwo>
</Parent>

props: 親から子へ渡される属性値　※子コンポーネントで変更できない
state: 子の内部状態 ※親コンポーネントから参照・変更できない
L stateが更新されるとstateを持つコンポーネントが再レンダリングされる

### props
外部から渡される属性値は、propsと呼ぶ

<Component
	string="this is string"
	number={123}
	bool={true}
	array={[9,8,7]}
	object={{ hello: 'world'}}
	func = {a=> a*2}
	variable={something}
/>

<button
	id="the-button"
	className="button is-primary"
	onClick={handleClick}
>Button</button>
<label htmlFor="the-id">Label</label>

<input
	type="text"
	id="email"
	arial-labelledby="the-label"
	aria-required="true"
/>

### イベント処理
イベントの処理は別に書く

const handleClick = () => {
	
}

const button = <button onClick={handleClick}>Click me</button>;

### カスタム属性
独自要素には自由にpropsを定義できる

<Component customProp={something} />
<Layout
	header={<Header />}
	content={<Content />}
	footer={<Footer />}
/>

<Panel narrow>...</Panel>

### state
コンポーネント内部でデータを管理したい場合は、useState関数(state)を使う
　　L useStateは更新されたデータを覚えていて、2回目以降はそちらを使う

		function CountButton(){
			const countState = React.useState(0);
　
			const count = countState[0]; // 状態
			const setCount = countState[1]; // 状態を更新するための関数

			const handleClick = () => setCount(count + 1);

			return <button onClick={handleClick}>{count}</button>;
		}

		const root = document.getElementById('root');


		ReactDOM.render(<CountButton />, root);

stateによる更新の影響範囲を確認

		function Parent(){
			const [num, setNum] = React.useState(0);

			const handleClick = () => setNum(num + 1);

			return(
				<>
					<p><button onClick={handleClick}>{num}</button></p>
					<p><Child num={num} /></p>
					<p><Child num={num} /></p>
				</>
			);
		}

		function Child({ num }){
			const [myNum, setMyNum] = React.useState(0);

			const handleClick = () => setMyNum(myNum + 1);

			return (
				<button className="child" onClick={handleClick}>
					{num + myNum}
				</button>
			);
		}

### フック
フックはReactの便利な機能を導入できるヘルパー関数
useStateはフックの一つ

なるほど、propsだけでなくuseStateを使って開発していくのね。
なんとなくイメージが沸きました。