[ユーザステータス]頻繁に変更される値を管理します.

State?
コンポーネントのステータス

ユーザ状態を作成すると、入力ユーザ状態(初期値)は、→[状態、setState]という配列

を返す.

state==現在の状態値を含む変数

setState==stateを変更するための関数

import React from 'react';

const[state, setState] = useState(초기값);

// import 안했다면 const[state, setState] = React.useState(초기값);

const[count, setCount] = React.useState(1);
//State: count = 1
setCount(6);
//State: count = 6;

useState(초기값)을 사용하면 
초기값 1이 담긴 변수 count,
변수 count를 수정할 수 있는 함수 setCount가 배열 형태로 반환된다

元のすべてのReactコンポーネントは、リフレッシュするたびに再ロードされます.
私はこの不要な行為が好きではありません!
YousStateを使用する場合、setStateを使用して値を変更した場合にのみ更新(レンダリング)され、再ロードされます.
リフレッシュのみの場合、基本コンポーネントは再ロードされますが、userStateを使用する部分は変更されません.

import React, { Component, useState } from 'react';

function App() {
  const [time, setTime] = useState(1);
	
	const handleClick = () => {
		setTime(time + 1);
	}
  return (
    <div>
      <span>현재 시각: {time}시</span>
      <button onClic={handleClick}>Update</button>
    </div>
  )
}
export default App;

settTime関数を使用して時間を更新するたびに、コンポーネントはブラウザで再レンダリングされ、更新後の状態は時間に入ります.
Uploadボタンを押して出力名を作成する例

function App() {
  const [names, setNames] = useState(["홍길동", "김민수"]);

  return (
  <div>
    <input type="text"/>
    <button>Upload</button>
    {names.map((name, idx) => {
      return <p key={idx}>{name}</p>
    })}
  </div>
  );
}
export default App;

names配列([洪吉童][金敏秀])では、itemごとにp tagが掛けられています
このようにreactにmapを書き込みelement({name})を出力する場合は、keyが追加される必要があります(なくても警告は停止します).
プロセス

inputラベルの値

検出

Uploadボタン

をクリック

submitはデフォルト配列に新しい値

を追加します.

は、画面

に出力.
💡 1.inputラベルに何が書かれているかを確認します.

import React, { Component, useState } from 'react';

function App() {
  const [names, setNames] = useState(["홍길동", "김민수"]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  return (
  <div>
    <input type="text" value={input} onChange={handleInputChange}/>
    <button>Upload</button>
    {names.map((name, idx) => {
      return <p key={idx}>{name}</p>
    })}
  </div>
  );
}
export default App;

onChangeを追加して変更を検出し、変更のたびに関数handleInputChangeを呼び出します.
→setInput関数で変数inputの値を変更する
💡 2.クリックを検出し、初期値に新しい値を追加

import React, { Component, useState } from 'react';

import './App.css';

function App() {
  const [names, setNames] = useState(["홍길동", "김민수"]);
  const [input, setInput] = useState('');

  const handleInputChange = (e) => {
    setInput(e.target.value);
  };

  const handleUpload = (e) => {
    setNames((prevState) => {
      return([input, ...prevState]);
    });
  }

  return (
  <div>
    <input type="text" value={input} onChange={handleInputChange}/>
    <button onClick={handleUpload}>Upload</button>
    {names.map((name, idx) => {
      return <p key={idx}>{name}</p>
    })}
  </div>
  );
}
export default App;

Inputに値を入力し、Uploadボタンを押すと、既存の値にinputの値を追加しようとします.
buttonでonClickでイベントを検出し、発生時にhandleUploadを呼び出す.
呼び出したhandleUploadはsetNames関数でnamesの値を変更し、コールバック関数が使用されます.
あの….それは何ですか.
stateを変更すると、新しいstate値が以前のstate値に関連付けられます.
コールバック関数(setStateパラメータとして新しい状態を返す関数)の使用を推奨します.

const handleUpload = (e) => {
    setNames((prevState) => {
      return([input, ...prevState]);
    });
  }

callback 함수?
다른 함수의 인자로 전달된 함수

callback 함수의 인자는 우리가 update 하기 이전의 State 값임.(prevState)
return 안의 값이 새롭게 update가 될 state임.
return([]) 우리는 배열 속에 값을 넣고, 그걸 출력하는 방식이므로 
배열에 새로 들어온 값이 먼저 출력되도록 input을 먼저 넣고
뒤에 올값은 prevState(원래 있던 배열, 홍길동 김민수)인데 ...prevState로 넣어준다.

こんなにたくさん入れてもあんなに入れても

1. 
const handleUpload = (e) => {
    setNames((prevState) => {
      return([input, ...prevState]);
    });
  }
새로운값
홍길동
김민수
-- 새로운 값인 input이 앞에 넣은대로 잘 들어가고, ...prevState는 기본값으로 넣어둔것

2.
const handleUpload = (e) => {
    setNames((prevState) => {
      return([...prevState, input]);
    });
  }
-- 1에서 input을 뒤에 넣었으니 새로운 값이 마지막에 잘 나온다

3. const handleUpload = (e) => {
    setNames((prevState) => {
      return([input]);
    });
  }
홍길동
김민수
-- Upload 버튼 클릭 후
새로운값

기존의 새로운 값이 먼저 나와있다가, 버튼을 누르면 handleUpload가 호출되어 새로운 값만 남는다

[「洪吉童」「金敏秀」]+カエル→カエル洪吉童金敏秀
[「カエル」「洪吉童」「金敏秀」]+子犬→子犬カエル洪吉童金敏秀
このようにprevStateは更新を継続します
うん.もしこの初期値が重いなら、ずっとロードしても効率がありませんか?
→初期値をcallbackではなく値で入れればOK!

function veryHeavy() {
	console.log('와 무지하게 무겁다');
  	return (['홍길동', '김민수']);
}


const[name, setName] = useState(() => {
	return veryHeavy();
});

これでリロード時に一度歌って終わりました!
スターコードのReact Hooksシリーズを見て整理するために作られました!