React - useState

useState

useState는 hook 라이브러리의 기능 중 하나이다.

useState를 사용하면 함수형 컴포넌트에서도 상태관리를 손쉽게 할 수 있다.

의외로 사용방법은 간단하다.

ex) 버튼을 누르면 count 값이 증감하는 기능

import React, { useState } from "react";

function App() {

  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <h1>{count}</h1>
        <button onClick={() => setCount(count + 1)}>+1</button>
        <button onClick={() => setCount(count - 1)}>-1</button>
      </div>
    </>
  );
}

코드를 살펴 보자면 일단 import 부분에

import React, { useState } from "react";

{ useState } 를 추가하여 useState Hook을 react에서 가져온다.

const [count, setCount] = useState(0)

count 변수와 해당 count를 갱신할 수 있는 함수를 적고 useState의 초기값을 0으로 할당했다.

<h1>{count}</h1>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(count - 1)}>-1</button>

count로 현재 값을 보여주고
버튼을 클릭할 때 마다 setCount를 변경해준다.

 function plus() {
    setCount(count + 1);
  }

  function minus() {
    setCount(count - 1);
  }

  return (
    <>
      <div>
        <h1>{count}</h1>
        <button onClick={plus}>+1</button>
        <button onClick={minus}>-1</button>
      </div>
    </>
  );
}

이런 식으로도 사용할 수 있다.

+버튼을 누르면 증가하고 -버튼을 누르면 감소한다.