動作基本(Project)

Udemy-一口大的反应

📌 日記帳の作成(1)

src/App.js

import "./App.css";
import DiaryEditor from "./DiaryEditor";

const App = () => {
  return (
    <div className="App">
      <DiaryEditor />
    </div>
  );
};
export default App;

src/DiaryEditor.js

▼DiaryEditor:日記帳コンポーネント

クラスの名前を構成部品の名前と一致させる(直感的なスタイルコードを作成する)

著者(input)、日記本文(textarea)、鑑定点数(select)、保存(button)

▼useState:元素を反応器で直接制御できるようにしなければならない
▼▼状態変化関数:inputとtextareaが受け取ったvaluepropに渡す

ユーザーのステータス(「作成者」):初期値の設定

onChange
イベントをリアルタイムで値を変更するように設定する(コールバック関数を登録してイベントオブジェクトeをパラメータとして渡す)
ユーザーが入力すると、onChangeはどのようなイベントが発生したかを認識し、onChangeは値を変更したときに実行されるイベントを認識します.
=inputで値を変更した場合、onChangeのPropで渡されるコールバック関数を実行すると考えられます.

e.target.value
コンソールを介して送信されたイベントオブジェクトを開くと、targetを開くと、変更した値をすぐに表示できます.
イベントオブジェクトのtargetのvalueを使用すると、入力した値をコールバック関数にロードして使用できます.
inputが変更しなければならない値

setAuthor(e.target.value), setContent(e.target.value)
作成者が入力した値が変化すると、その値に更新されると、入力はステータスとともに使用できます.
コールバック関数の実行時に、パラメータイベントオブジェクトeから現在入力されている(現在変化している)値を新しい状態の値に変更し、author、content stateを値に変更し、実際に画面に表示します.

const [author, setAuthor] = useState("");
const [content, setContent] = useState("");

<input name="author" value={author}
	onChange={ (e) => {setAuthor(e.target.value);}
} />
<textarea name="content" value={content}
	onChange={ (e) => {setContent(e.target.value);}
} /> 

同じ状態(value、onChangeのコールバック関数、データ型(空白文字列)の場合、それらを1つの状態に組み合わせることができます.

state authorとcontentを一緒に

新しいオブジェクトを作成して渡す必要があります(ステータスを変更する場合、setStateステータス変更関数に新しい変更値をパラメータとして渡すため)=オブジェクトの値を変更するには、新しいオブジェクトを作成して渡す必要があります

inputの著者はe.targetである.valueに変更する必要がありますが、コンテンツは変更できません(保持する必要があるため)、元の状態に更新されます.(textareaはコンテンツを変更し、作成者によって保持されます)

const [state, setState] = useState({
	author: "",
    content: "",
});

<input name="author" value={state.author}
	onChange={ (e) => {
    	setState({
        	author: e.target.value,
            content: state.content,
        });
    }
} />
<textarea name="content" value={state.content}
	onChange={ (e) => {
    	setState({
        	content: e.target.value,
            author: state.author,
        });
   	}
} /> 

拡張演算子の使用

stateがオブジェクトにマージされ、複数の値

state展開その属性

setStateは、新しいオブジェクトを作成するときにauthor:e.targetを使用します.valueには新しい値があるはずですが、次の行にspread演算子がある場合、作成者の値が入力されます(元の値に上書きされた場合、最終的には何も更新されません)=>원래있던 state를 먼저 펼쳐주고 나서 변경하고자하는 state의 property를 마지막에 적어준다

const [state, setState] = useState({
	author: "",
    content: "",
});

<input name="author" value={state.author}
	onChange={ (e) => {
    	setState({
        	...state,
        	author: e.target.value,
        });
    }
} />
<textarea name="content" value={state.content}
	onChange={ (e) => {
    	setState({
        	...state,
        	content: e.target.value,
        });
   	}
} /> 

▼重複コード消去-eventHandlerマージ

eventHandler

inputとtextareaへのonChange

nameとvalue:置換値に自動的に更新

  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

<input name="author" value={state.author} onChange={handleChangeState} />
<textarea name="content" value={state.content} onChange={handleChangeState} />

▼▼感情点数1~5点(select,option)

非文字列のため、デフォルトは1

です.

name、value、onChangeのスケールは同じ

emotionpropertyは、selectが他のオプションを選択した場合、onChangeイベント=>handleChangeState実行=>e.targerが発生することを示す.nameの感情値が変化し、=>オプションが変化する

const [state, setState] = useState({
	author: "",
    content: "",
    emotion: 1,
});

<select name="emotion" value={state.emotion} onChange={handleChangeState}>
  <option value={1}>1</option>
  <option value={2}>2</option>
  <option value={3}>3</option>
  <option value={4}>4</option>
  <option value={5}>5</option>
</select>

保存#(button)

ボタンをクリックしてalertウィンドウ

  const handleSubmit = () => {
    console.log(state);
    alert("저장 성공!");
  };
  
  <button onClick={handleSubmit}>일기 저장하기</button>

☑️ CSS styling

.App {margin:0 auto;}
.DiaryEditor { border:1px solid #e5e5e5; text-align:center; padding: 20px; }

.DiaryEditor input, .DiaryEditor textarea { margin:0 0 20px 0; padding:10px; width:500px; }
.DiaryEditor textarea { width:500px; height:150px; }
.DiaryEditor select { margin:0 0 20px 0; padding:10px; width:500px; }
.DiaryEditor button { cursor:pointer; padding:10px; width:500px; }

📝 Result

import { useState } from "react";

const DiaryEditor = () => {
  const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1
  });

  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = () => {
    console.log(state);
    alert("저장 성공!");
  };

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          value={state.author}
          onChange={handleChangeState}
          name="author"
          placeholder="작성자"
          type="text"
        />
      </div>
      <div>
        <textarea
          value={state.content}
          onChange={handleChangeState}
          name="content"
          placeholder="일기"
          type="text"
        />
      </div>
      <div>
        <span>오늘의 감정점수 : </span>
        <select
          name="emotion"
          value={state.emotion}
          onChange={handleChangeState}
        >
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
        </select>
      </div>
      <div>
        <button onClick={handleSubmit}>일기 저장하기</button>
      </div>
    </div>
  );
};
export default DiaryEditor;