[리액트] useState 사용법

useState는변수 값이 바뀔 때마다, 화면에서 동적으로 업데이트를 해주는 도구를 제공해줍니다. useState를 사용하기 위해서 useState를 import 해줍니다.

 

[Import]

import { useState } from 'react';

 

[선언]

const [state, setState] = useState(선언할 값);

 

[활용]

버튼 클릭 시, 카운터가 올라가는 예제입니다.

버튼을 누를 때마다, useState에 값이 업데이트가 된 것을 확인할 수 있습니다.

import "./styles.css";
import React, { useState } from 'react';

export default function App() {
  const [Cnt, setCnt] = useState(0);
  return (
    <div>
      <p>클릭 횟수는 {Cnt} 입니다.</p>
      <button onClick={() => setCnt(Cnt + 1)}>
        값 더하기
      </button>
      <button onClick={() => setCnt(Cnt - 1)}>
        값 빼기
      </button>
      <button onClick={() => setCnt(0)}>
        초기화
      </button>
  </div>
  );
}