React.useState()

useState

컴포넌트 안에서 변경될 값을 사용하기 위한 React Hook

[] 안에 현재상태와 갱신 될 값을 담고, useState() 안에 초기값을 작성한다

const [num, setNum] = useState(0);

위 코드는 아래 코드와 같다.

const numState = useState(0);
const num = numState[0]
const setNum = numState[1]

예제를 통해 useState를 이해하기

아주 간단하게 (+1)버튼 클릭 시, 숫자가 증가하고
(-1) 버튼 클릭 시, 숫자가 감소하지만 음수값이 되지 않도록 만들어보았다.

import React, { useState } from "react";

function Counter() {
  const [num, setNum] = useState(0);

  const onIncrease = () => {
    setNum((preNum) => preNum + 1);
  };

  const onDecrease = () => {
    setNum((preNum) => (preNum <= 0 ? 0 : preNum - 1));
  };
  return (
    <div>
      <h1>{num}</h1>
      <button onClick={onIncrease}>+ 1</button>
      <button onClick={onDecrease}>- 1</button>
    </div>
  );
}

export default Counter;

감소버튼을 눌러도 음수값이 되지 않도록 삼항연산자를 사용했다.

const onDecrease = () => {
    setNum((preNum) => (preNum <= 0 ? 0 : preNum - 1));
  };