useState란?

useState를 통해서 컴포넌트 안에서 바뀌는 값을 관리해 줄 수 있다
React 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었다

첫번째 예제

function Counter() {
  const [num, setNum] = useState(0);
  // number useState선언
  const onPlus = () => {
    setNumber(number + 1);
  } // number에 플러스 1
  const onSubtraction = () => {
    setNumber(number - 1);
  } // number에 마이너스 1
  return (
    <div>
      <h1>0</h1>
      <button onClick={onPlus}>+1</button>
		//onClick을 통해 onPlus함수를 실행
      <button onClick={onSubtraction}>-1</button>
		//onClick을 통해 onSubtraction함수를 실행
    </div>
  );
}

이처럼 간단한 카운트 예제를 만들 수 있다
브라우저를 새로고침 하지 않고 상태를 계속 변경해줄 수 있다
한가지 문제점은 setNumber를 통해 number 값을 직접 변경한다는 건데

function Counter() {
  const [num, setNum] = useState(0);
  // number useState선언
  const onPlus = () => {
    setNumber(testNumber => testNumber +1);
  } // number에 플러스 1
  const onSubtraction = () => {
    setNumber(testNumber => testNumber +1);
  } // number에 마이너스 1
  return (
    <div>
      <h1>0</h1>
      <button onClick={onPlus}>+1</button>
		//onClick을 통해 onPlus함수를 실행
      <button onClick={onSubtraction}>-1</button>
		//onClick을 통해 onSubtraction함수를 실행
    </div>
  );
}

이 예제처럼 따로 number를 빼주면 함수형 업데이트가 가능하다

방식은 함수형 업데이트 형식으로 작성해주는 것이 좋으며
컴포넌트는 항상 대문자로 작성한다.

두번째 예제

    function MinutesToHours() {
      const [amount, setAmount] = React.useState(0)
      // 숫자값 변수
      const [inverted, setInverted] = React.useState(false);
      // 활성화 비활성화 변수
      const onChange = (event) => {
        // 이벤트 함수를 만들고 
        setAmount(event.target.value);
        // target의 value값
      };
      const reset = () => setAmount(0) // 리셋 인풋값을 0으로
      const onInvert = () => { // 리셋과 동시에 활성화 비활성화를 바꿔줌
        reset()
        setInverted((current) => !current)
      }
      return (
        <div>
          <h2>M , H</h2>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
            value={inverted ? amount * 60 : amount} // 삼항연산자 사용
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={onChange}
            disabled={inverted}
            />
            </div>
            <div>
            <label htmlFor="hours">Hours</label>
            <input
            value={inverted ? amount : Math.round(amount / 60)}
            id="hours"
            placeholder="Hours"
            type="number"
            onChange={onChange}
            disabled={!inverted}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
        </div>
      );
    }

    function App() {
      const [index, setIndex] = React.useState("x")
      const onSelect = (event) => {
        setIndex(event.target.value)
      };
      console.log("render w/", index)
      return (
        <div>
          <h1>Super Converter</h1>
          <select value={index} onChange={onSelect}>
            <option value="x">Start</option>
            <option value="0">Minutes & Hours</option>
            </select>
            <hr />
            {index === "x" ? "Please select your units" : null}
            {index === "0" ? <MinutesToHours /> : null}
        </div>
      )
    }

분을 시간으로 바꿔주는 간단한 예제