useState

import React, { useState } from "react";

export default function Example() {
  const [count, setCount] = useState(0);
  // 배열구조분해할당 -> useState를 이용해 변수를 선언하면 2개의 아이템 쌍이 들어있는 배열이 만들어진다.
  // 첫 번째 아이템은 현재 변수(count)를, 두 번째 아이템은 해당 변수를 갱신할 수 있는 함수(setCount)를 의미한다.
  // 배열구조분해라는 특별한 방법으로 변수를 선언했기 때문에, [0], [1]과 같이 idx적으로 접근하는 것은 좋지 않다.
  // count는 this.state.count, setCount는 this.setState와 유사함 
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Click me!</button>
	// setCount(count++) 이 안 되는 이유) const로 변수를 설정해서 변수 자체의 변화를 일으킬 수 없다.
	// 그렇다고 let으로 변수를 선언하면 한 박자 늦게 count된다.
	// 이유) count++의 경우 먼저 count라는 변수의 값을 증가시킨 후, 그에 따른 값을 출력
	// 즉 버튼 클릭 시 count 변수가 증가는 했지만 바로 나타나지 않는다.
	// 해결방법) ++count의 경우 우선적으로 작업을 하기 때문에 count + 1과 같은 효과를 볼 수 있다.
	// count라는 단일 변수만 있었다면 ++count든 count++든 결과값이 같게 나오지만, setCount 등과 같이 추가적인 변수가 있을 시 이런 현상 발생
      <p>You clicked {count} times</p>
    </div>
  );
}

여러 개의 변수를 사용하기 싫어요

function handleOrangeClick() {
  setFruit('orange'); // // this.setState({ fruit: 'orange' })와 같은 작용
  // 하지만 class component의 this.setState과는 달리, state를 갱신하는 것은 병합 ㄴㄴ 대체 ㅇㅇ
}