state 선언 방식

const [number, setNumber] = useState(0);

const [number, setnumber] = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

usSstate 동작 원리

• 배열 비구조화 할당을 활용
• 첫번째 원소는 현재 상태, 두번째 원소는 setter 함수
• 원래대로라면

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

적용

function App() {
  const [number,setNumber] = useState(0);

  const handleClick = () => {
    setNumber((prev) => prev+1)
  }

  return (
    <div>
      <h2>{number}</h2>
      <button onClick={handleClick}>Click me</button>
    </div>
  )

};

버튼 클릭때마다 현재값+1 한 값을 누적 후 출력

prev?

const [count, setCount] = useState(0);

const onClick = () => {
  setCount(count=> count+ 1);
  setCount(count=> count+ 1);
    console.dir(count);
}

const [count, setCount] = useState(0);

const onClick = () => {
  setCount(count+ 1);
  setCount(count+ 1);
  console.dir(count);
}

etNumber(prev => prev + 1); 이렇게 함수형으로 파라미터를 넘겨주면 상태값 변경을 배치로 처리한다고 한다.
위의 코드 예제로 쳐보면 둘이 다른 결과인걸 확인 할 수 있다.

prev 말고 임의의 다른 값을 넣어도 가능하다.

수정하는 함수 사용시 두가지 옵션

const [toDo, setToDo] = useState("");
const [toDos, setToDos] = useState([]);

setToDos((toDos) => [toDo,...toDos])
setToDo("");

setToDo 에 빈값을 직접 넣어 보내서 ToDo를 빈값으로 조작
setToDos 에 함수를 넣어 보내기