useState

컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 리액트에서는 이러한 동적인 값의 상태를 관리하기 위해 useState란 함수가 있다.
useState 를 호출하면 배열 이 반환되는데 첫번째 원소에는 현재상태, 두번째 원소는 Setter 함수이다.

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

위 코드를 배열 비구조화 할당을 통해 다음과 값이 쓸수 있다.

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

위 코드 useState 의 파라미터에는 현재 상태의 기본값을 넣어주며 0 으로 지정한 상태.

setNumber() 함수에는 파라미터에 업데이트 될 내용을 넣어주면 된다.

다음은 버튼을 누르면 값이 바뀌는 예제이다

import { useState } from 'react';

function App() {
  const [state, setState] = useState(0);
  const onIncrease = () => {
    setState(state + 1);
  };
  const onDecrease = () => {
    setState(state - 1);
  };
  return (
    <div>
      <div>{state}</div>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default App;

1. useState 리액트로부터 사용 선언을 한다.
2. jsx에 ui를 구성해준다.
3. useState의 기본값을 설정해준다. //0
4. 버튼을 클릭하면 state의 값이 변하게 함수 등록