[React] UseState

UseState란

State는 컴포넌트가 가질 수 있는 상태이다.

사용하는 이유

• 간단하고 직관적으로 상태를 관리할 수 있다.
• 객체나 배열 같은 복잡한 상태를 관리할 수 있다.
• 자동으로 재렌더링이 된다.

사용법

먼저 useState를 사용하려면 import를 받아야 한다.

import { useState } from 'react'

그 다음 사용할 변수를 선언해야 한다.

const [ 변수명, set변수명 ] = useState( 초기값 )

이 형태로 사용된다.

예제

import {useState} from 'react'

export default function App() {
  const [result, setResult] = useState(0);
  function hit() {
    setResult(result + 1);
  }

  return (
    <div className="App">
      <h1>권세원을 몇 대나 때릴 수 있을까요?</h1>
      <h2>{result}</h2>
      <button onClick={hit}>때리기</button>
    </div>
  );
}

위와 같이 작성하면 아래와 같은 화면이 나온다.

여기서 때리기 버튼을 누르면 0이 1씩 증가하는 것을 알 수 있다.