Resact学習3日目

30980 ワード
web はんのう Web開発 フロントエンド React frontend テキストリンク
今日のキーワード
1. React.useState()
2.アレイ構造設計(アレイ構造分解の割当)
3.昇格状態

今日のサンプルコード

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>react day3</title>
	<style>
		.content-wrap {
			text-align: center;
			margin-top: 250px;
		}

		.count-btn button {
			margin: 0 5px;
			font-size: 18px;
			padding: 5px 10px;
			border: none;
			border-radius: 3px;
			transition: all .13s;
		}

		.count-btn button:hover {
			cursor: pointer;
			color: #fff;
			background: #61dbfb;
		}
	</style>
</head>

<body>
	<div id="root"></div>

	<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
	<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	<script type="text/babel">
			
		// 카운트 될 숫자 컴포넌트   
		const Count = (props) => <h1>{props.children}</h1>;
        
		// 카운팅 이벤트 버튼
		const Buttons = ({ countDown, countUp, resetCount }) => (
			<div className="count-btn">
				<button type="button" onClick={countDown}>-</button>
				<button type="button" onClick={countUp}>+</button>
				<button type="button" className="reset-btn" onClick={resetCount}>reset</button>
			</div>
		);

		// 요소 컴포넌트들을 하나의 컴포넌트로 정의 (부모 컴포넌트)
		const App = () => {
			// count 상태값 정의 및 초기화
			const [count, setCount] = React.useState(0);

			// 카운트 다운 함수
			function handleCountDownClick() {
				console.log('count down');
				setCount(count - 1);
			}

			// 카운트 업 함수
			function handleCountUpClick() {
				console.log('count up');
				setCount(count + 1);
			}

			// 카운트 리셋 함수
			function handleResetCountClick() {
				console.log('reset count');
				setCount(0);
			}

			return (
				<div className="content-wrap">
					<Count>{count}</Count>
					<Buttons
						countDown={handleCountDownClick}
						countUp={handleCountUpClick}
						resetCount={handleResetCountClick} />
				</div>
			);
		}
	
    	// 렌더링 할 최상위 부모 컴포넌트
		const root = document.querySelector('#root');

		// 렌더링 함수 호출
		ReactDOM.render(<App />, root);

	</script>
</body>

</html>
例の説明
ボタンをクリックして数字のカウントを増やしたり減らしたりする簡単な例です.
リセットボタンを再度クリックすると、初期値(0)に再初期化されます.
前回のレッスンでは、イベントが発生する構成部品を表すイベント関数を定義して使用しましたが、このレッスンでは親構成部品のイベントを定義し、そのイベントによって変化するステータス値(count)を他の子のpropsデータに渡します.
ステータス値、またはイベントを親コンポーネントに昇格させるには、「昇格ステータス」と呼ばれます.そしてReactuserState()を使用してステータス値を定義および初期化し、使用します.
まず,本例で考慮すべき要因を考える.
  • カウントする数字
  • カウントイベントボタン(増加、減少、初期化)
    • これらの必須要素を各構成部品として定義します.
    // 카운트 될 숫자 컴포넌트   
const Count = (props) => <h1>{props.children}</h1>;

// 카운팅 이벤트 버튼
const Buttons = ({ countDown, countUp, resetCount }) => (
	<div className="count-btn">
    	<button type="button" onClick={countDown}>-</button>
        <button type="button" onClick={countUp}>+</button>
        <button type="button" className="reset-btn" onClick={resetCount}>reset</button>
	</div>
);
    前回(2日目)にprops、オブジェクト構造分解割当、onClickについて言及しましたので、この部分はスキップしてください
    定義された要素要素を1つの要素として定義します.
    前回のレッスンまでは、定義した構成部品を変数としてレンダリングしていましたが、今日からは、その子を含む親構成部品として宣言し、構成部品ラベルとして使用します.
    これまでの構成部品の宣言と同じ方法です.
    // 요소 컴포넌트들을 하나의 컴포넌트로 정의 (부모 컴포넌트)
const App = () => {
	// 카운트 될 숫자의 상태 값
	const [count, setCount] = React.useState(0);

	// 카운트 다운 함수
    function handleCountDownClick() {
    	console.log('count down');
        setCount(count - 1);
	}

	// 카운트 업 함수
	function handleCountUpClick() {
		console.log('count up');
		setCount(count + 1);
	}

	// 카운트 리셋 함수
	function handleResetCountClick() {
		console.log('reset count');
		setCount(0);
	}

	return (
		<div className="content-wrap">
			<Count>{count}</Count>
			<Buttons
				countDown={handleCountDownClick}
				countUp={handleCountUpClick}
				resetCount={handleResetCountClick} />
		</div>
	);
}
    要素を含む戻りに加えて、多くの内容が含まれています.
    一つずつ見ます.
    まず、今日の例のコアキーワードReactです.useState()を紹介します.
    ステータスとは?
    Stateは動的値(状態)を表します.
    これは、propsなどの親コンポーネントから子コンポーネントへの影響を与えるデータです.
    異なる点は、propsが関数のパラメータとしてサブエレメントに渡され、state(関数で宣言された変数のように)がエレメントで管理されることです.
    React.useState()は、ステータスを動的に管理する方法です.
  • 構文
    React.useState(状態初期値);
    かっこ()内は、ステータスの初期値を指定します.
    • カウントする数値のステータスを変数として宣言します.
    const countState = React.useState(0);
    宣言されたCountStateをコンソールに出力します.

    このような配列で出力が確認できます.
    userState()メソッドは、結果として配列を返します.
    配列内のデータを表示する場合
    配列の最初の値はさっきのreactです.最初に指定した値をuseState(0)で括弧内に出力します.
    配列の2番目の値には、初期に指定された状態値(配列の1番目の要素値)を変更する関数が含まれていることが確認されます.
    例を用いてuseState()について説明します.
    countState配列の最初の値と2番目の値をそれぞれ使用するために、変数を個別に宣言します.
    // 카운트 상태값 (배열의 첫번째 요소)
const count = countState[0];

// 카운트 상태값을 변경해 줄 함수 (배열의 두번째 요소)
const setCount = countState[1];
    これにより配列の値を変数として使用できます.
    前回学んだオブジェクト構造分解配分(destructuring)を覚えているかどうか分かりません.
    配列も同様に構造分解配分を行うことができる.
    宣言したばかりのcountState(ステータス宣言)、count(ステータス値)、setCount(ステータス値変更関数)
    私は1回の宣言ですべての人を可能にします.
    const [count, setCount] = React.useState(0);
    終わります.
    これが配列構造分解配分である.
  • 構文
    cont[アレイデータの変数名を指定し、アレイデータの変数名を指定する]=アレイ(アレイデータのソース)
    • このように宣言すればcount,setCountは単独の変数宣言を必要とせずに使用できる.
    また、Appコンポーネントのイベント関数を表示すると、
    const App = () => {
	...

	// 카운트 다운 함수
    function handleCountDownClick() {
    	console.log('count down');
        setCount(count - 1);
	}

	// 카운트 업 함수
	function handleCountUpClick() {
		console.log('count up');
		setCount(count + 1);
	}

	// 카운트 리셋 함수
	function handleResetCountClick() {
		console.log('reset count');
		setCount(0);
	}

	...
}
    宣言されたsetCount()関数を使用してcountステータス値を変更するかどうかを確認できます.
    宣言されたイベント関数をボタンにインプラントする必要がありますが、親コンポーネントに宣言されているため、propsとしてサブコンポーネントbuttonsに渡す必要があります.
    const App = () => {
	...

	return (
		<div className="content-wrap">
			<Count>{count}</Count>
			<Buttons
				countDown={handleCountDownClick}
				countUp={handleCountUpClick}
				resetCount={handleResetCountClick} />
		</div>
	);
}
    イベントはcountDown、countUp、resetCountの名義でButtonsコンポーネントに渡されます.
    イベントがサブコンポーネントに降格した場合は、Buttonsコンポーネント宣言関数で
    // 카운팅 이벤트 버튼
const Buttons = ({ countDown, countUp, resetCount }) => (
	<div className="count-btn">
    	<button type="button" onClick={countDown}>-</button>
        <button type="button" onClick={countUp}>+</button>
        <button type="button" className="reset-btn" onClick={resetCount}>reset</button>
	</div>
);
    オブジェクト構造分解割当でイベントを受信し、ボタンごとにonClickプロパティを指定します.
    最後には必ずRealtDOMをレンダー()関数としてレンダリングします.
    / 렌더링 할 최상위 부모 컴포넌트
const root = document.querySelector('#root');

// 렌더링 함수 호출
ReactDOM.render(<App />, root);
    (!) 今日は変数ではなく親要素として定義されているため、レンダリング関数の最初のパラメータとして使用されます.
    変数名ではなくラベルで記入します.
    保存してブラウザで検証します.
    まず[追加](Add)ボタンをクリックします.


    ふえる
    削減ボタンをクリック


    減少する.
    増やして、減らして、繰り返しいじって、resetボタンをクリックします



    初期化を確認できます.
    これで今日の例題は終わりました
    >>>征服中央揃え<<
    Web3.js (1)