[React] Hook, useState

Hook 이란

클래스 컴포넌트를 작성할 필요 없이 함수 컴포넌트에서도 state 관리와 생명주기, 메서드 등 다양한 기능들을 사용할 수 있는 개념

 

useState

Hook의 종류중 하나로 리액트에서 가변적인 state변수를 관리할 수 있다.

 

useState 문법

const [state, setState] =useState(초기값);

state를 변수, setState를 변숫값을 변경시킬 수 있는 함수라고 생각하면 이해가  쉽다.

 

useState를 사용하여 숫자를 변화시킬 수 있는 코드를 만들어 보았다.

import { useState } from "react";

const App = () => {
  const [calculator, setCalculator] = useState(0);

  const onClickPlus = () => {
    setCalculator(calculator + 1);
  };

  const onClickMinus = () => {
    setCalculator(calculator - 1);
  };

  return (
    <div className="bg-red-100 min-h-screen flex justify-center items-center">
      <button onClick={onClickMinus}>-</button>
      <div className="mx-10">{calculator}</div>
      <button onClick={onClickPlus}>+</button>
    </div>
  );
};

export default App;

useState를 사용하기 위해서 useState를 import 해 주어야 한다.

import { useState } from "react";

 

const [calculator, setCalculator] = useState(0);

초기값이 0인 calculator변수와 setCalculator 함수를 생성했다.

 

const onClickPlus = () => {
    setCalculator(calculator + 1);
  };

  const onClickMinus = () => {
    setCalculator(calculator - 1);
  };

  return (
    <div className="bg-red-100 min-h-screen flex justify-center items-center">
      <button onClick={onClickMinus}>-</button>
      <div className="mx-10">{calculator}</div>
      <button onClick={onClickPlus}>+</button>
    </div>
  );

+를 누르면 onClickPlus 함수가 실행되고 안에 있는 setCalculator 함수가 calculator 변수의 값을 1 증가시킨다.

-를 누르면 onClickMinus 함수가 실행되고 안에 있는 setCalculator 함수가 calculator 변수의 값을 1 감소시킨다.

 

useState를 사용하면 state 변수와 그 변수에 저장되어 있는 값을 추적하고 변화시킬 수 있다.