React hooks 리액트 후크 사용하는 방법

React hooks는 클래스 구성 요소를 작성하지 않고 상태 및 기타 React 기능을 사용하는 방법입니다.

React 16.8에서 도입되었으며 자체 상태 및 수명 주기를 관리할 수 있는 기능적 구성 요소를 작성하는 인기 있는 방법이 되었습니다.

useState React hooks를 사용해서 상태를 추가하는 예제를 알아보겠습니다.

import React, { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

hooks는 useState초기 상태인 단일 인수를 사용하고 현재 상태 값과 이를 업데이트하는 함수의 두 요소가 있는 배열을 반환합니다.

위의 예에서 상태 변수 count를 사용하여 클릭 수를 추적 setCount하고 버튼을 클릭할 때 수를 업데이트하는 함수를 사용하고 있습니다.