useState

useState

1. useState

 - React 라이브러리에서 제공하는 훅(Hook) 중 하나

    ※ 훅(Hook) : 함수형 컴포넌트에서 상태(State) 관리와 기능들을 사용하기 위한 기능을 제공하는 함수

 - 함수형 컴포넌트에서도 상태(State)를 관리할 수 있음

 - 배열 형태의 반환값을 가지며, 배열의 첫 번째 요소는 현재의 상태 값, 두 번째 요소는 상태 값을 변경할 수 있는 함수

 

2. 사용법

 - Counter.js

import React, { useState } from "react";

const Counter = () => {
  // 변수 선언
  const [value, setValue] = useState(0);
  return (
    <>
      <h1>현재 카운터 값은 [{value}]입니다.</h1>
      
      {/* 버튼 클릭 시, 값이 달라짐 */}
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </>
  );
};

export default Counter;

 

 - App.js

import React from "react";
import Counter from "./Counter";

const App = () => {
  return (
    <>
      <Counter />
    </>
  );
};

export default App;

 

 - 결과