生活コード反応翌日

8345 ワード
生活コード TIL テキストリンク

7.state


propとStateの違い.
→propデバイスを使用する外部ユーザに適用
stateは、構成部品を使用する内部ユーザに適しています.
特定のモードで構成部品を変更します.
function App() {

const mode = 'WELCOME' // 모드가 WELCOME이다.
let content = null; // Content가 null

if(mode === 'WELCOME') // 모드가 WELCOME이라면
{
   content = <Article title="Welcome" body="Hello, WEB"></Article>; // content에 컴포넌트 저장
} else if(mode === 'READ') // READ라면
{
	content = <Article title="READ" body="Hello, WEB"></Article>; // 컴포넌트 저장
}

return (
	{content}
);
}
Stateの使用

  • useStateのインポート
    import { useState } from "react";

  • 値をuserStateにループします.
    • const [mode, setMode] = useState('WELCOME');
  • の値を変更する場合はsetModeに変更してください.
    • { setMode("READ");}}>
    Header title="REACT"onChangeMode={function (e) { e.preventDefault(); setMode("WELCOME");
    List押すREAD/Header押すWELCOME
    数値で指定した値でも、タグのプロパティに移動するとテキストになります.
    number()関数を使用して、文字→数値に変換できます.

    単純作成


    1.CREATEモードを作成します.
    else if(mode === 'CREATE') {
	 content = <CREATE onSubmit={(_title, _body) => {
     	const newTopic = {id: nextId, title: _title, body: _body}; // 받아온 값을 넣어줍니다.
        const newTopics = [...topics] // [...의 이름]은 해당 객체를 복제하는 의미입니다.
        newTopics.push(newTopic); // 복제한 newTopics에 추가한 내용인 newTopic을 넣어줍니다.
        setTopics(newTopics); // newTopics를 setTopics에 넣어 topics값을 갱신해줍니다.
        setMode("READ"); // 토픽을 추가했다면 READ 모드로 전환합니다.
        setId(nextId); // Id를 nextId로 바꿉니다.
        setNextId(nextId +1); // NextId값에 1을 추가해줍니다 // 다음id값이랑 겹치지 않기 위해
     }}><CREATE> // 새롭게 CREATE컴포넌트를 만들어서 content에 넣어줘야  합니다.
}
    2.CREATE素子
    function CREATE(props) {
	return (
    	<article>
        	<h2>Create</h2> // 지금 모드가 무슨 모드인지 나타내는 용도입니다.
            
            <form onSubmit={(e)=> {
            	e.preventDefault();
                const title = e.target.title.value // name이 title인 값을 가져옵니다.
                const body = e.target.body.value // name이 body인 값을 가져옵니다,
                props.onSubmit(title, body);
            }}
               <p>
                <input type="text" name="title" placeholder="title을 적어주세요" /> // title영역
              </p>
              <p>
                <textarea name="body" placeholder="body">
                  본문을 입력
                </textarea> // body영역
              </p>
              
              <p>
              	<input type="submit" value="Create" /> //전송 역할.
              </p>
            </form>
        </article>
    );
}
    結果

    学習で新しく学んだ内容.
    重要度★★
    onSubmitは、submitボタンをクリックしたときに発生するイベントです.
    重要度★★★
    PRIMITIVEタイプ:string、number、bight、boolean、undefined、symbol、nullの7種類.
    その中で重要なのはstring、number、boolean、null程度です
    重要度★★★★★★★
    オブジェクトタイプ:objec、array;//setの設定方法は前述のPRIMITIVEとは異なります
    に道を教える
    →newValue={.value}//大かっこ{.value}=value.
    newValueの変更
    setValue(newValue)=新しい値を導入します.
    今日のTIL终わり!

    明日勉強する内容


    更新!
    削除!
    JavaはCallBy Value?Call By Reference?
    3:Bagシングルチェーンテーブル実装