[React] useState

 

useState : 컴포넌트에서 바뀌는 값 관리

 

리액트 16.8에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다.

 

리엑트에서 엘리먼트에 이벤트를 설정해줄 때에는

 

on 이벤트이름 = {실행하고 싶은 함수} 형태로 설정해준다. 

 

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

useState를 사용할 때에는 상태의 기본값을 파라미터로 넣어서 호출한다.

이 함수를 호출해주면 배열이 반환되는데 첫번 째 원소는 현재 상태, 두번째 원소는 Setter 함수이다.

 

 

원래는 아래와 같이 해줘야 하지만,

 

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

 

배열의 비구조화 할당을 통해, 각 원소를 추출해준다.