useState React hook이 유용한 지, 어떻게 사용하는지 알아보십시오!

가장 자주 사용하는 하나의 React Hook은 useState입니다.

import React, { useState } from 'react'

useState() API를 사용하여 새 상태 변수를 만들고 이를 변경할 수 있습니다. 

useState()는 상태 항목의 초기 값을 받아들이고 상태 변수를 포함하는 배열과 상태를 변경하기 위해 호출하는 함수를 반환합니다. 배열을 반환하기 때문에 다음과 같이 각 개별 항목에 액세스하기 위해 배열 소멸을 사용합니다. const [count, setCount] = useState (0)

다음은 실제적인 예입니다.

import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('app'))

useState() 호출을 원하는 만큼 추가하여 상태 변수를 원하는 만큼 만들 수 있습니다. if 또는 다른 블록에 없는 구성 요소의 최상위 레벨에서 호출해야 합니다.