useState

useState를 통해, 해당 PLUS 버튼을 누르면 숫자 0이 +1씩 증가하도록 해보겠다.

function App() {
  const [counter, setValue] = useState(0);
  const onClickHandler = () => {
    setValue((prev) => prev + 1); // 이 부분이 가장 중요하다.
  };
  console.log("render");
  return (
    <div>
      <h1>Welcome</h1>
      <h2>{counter}</h2>
      <button onClick={onClickHandler}>Plus</button>
    </div>
  );
}

사실 setValue를 통해서, counter(숫자0의 값)을 변경시켜 주면 되는데,
  특이하게도 setValue에 내장된 기능을 살펴보면
  setValue((아무 변수) => console.log('아무변수')) 를 해보면
  아무변수가 useState에서 초기로 지정해 준 값임을 알 수 있다.
  
  고로 해당 console을 찍어보면 0이 나오는 경우를 확인 할 수 있다.	

이건 투두리스트를 만들 때도 확인이 가능하다.
기존의 투두리스트 항목들을

const [todos, setTodos] = useState([{title:'제목1', contents:'제목1'},{title:'제목2', contents:'제목2'})

이런식으로 초기값으로 설정해주고
setTodos((prev) => console.log(prev)를 해준다면, 위의 todos 기본 값들이 나오는 것이다.