리엑트 - setState로 state 변경하는 2가지 방법

1. setState()에서 직접 변경하는 방법

setState(state + 1) 등등

2. setState() 안에서 함수를 이용해 변경하는 방법

• 이때 함수의 첫번째 인자는 현재 State를 의미한다.
• 인자의 명칭은 맘대로 가능하지만 보통 cur or prev를 쓴다고 한다.

setToDos(currentArray => [toDo, ...currentArray]);

3. 예시

import { useState } from 'react';

function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (e) => { setToDo(e.target.value) };
  const onSubmit = (e) => { 
    e.preventDefault();
    if(toDo === "") {
      return;
    }
    //state변경함수의 state변경 2가지 방법
    setToDo("");
  
    //1. 직접 변경하는법
    // setToDos([toDo, ...toDos]);
    //2. 함수를 이용해서 수정하는법,
    //그리고 이 함수의 첫번째 인자는 현재의 state를 받는다.
    setToDos(currentArray => [toDo, ...currentArray]);
  }


  return (
    <div>
      <h1>My TO Dos ({toDos.length})</h1>
      <form onSubmit={onSubmit}>
      <input type="text" placeholder="Write your to do..." value={toDo} onChange={onChange} />
      <button>Add to do</button>
      </form>
    </div>
  );
}

export default App;