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

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

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


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

  1. import React, { useState } from 'react';
  2. function Example() {
  3. const [count, setCount] = useState(0);
  4. return (
  5. <div>
  6. <p>You clicked {count} times</p>
  7. <button onClick={() => setCount(count + 1)}>
  8. Click me
  9. </button>
  10. </div>
  11. );
  12. }


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

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

* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
최찬희 프로필
WrapUp 블로거

최찬희

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^

댓글작성