리액트 Hooks : useState

2022. 06. 27.

2분

상태(state)란 무엇인가?

리액트 컴포넌트에서 동적인 값을 상태(state) 라고 한다. 리액트 16.8 이전
버전에서는 함수형 컴포넌트에서 상태를 관리할 수 없었지만 16.8 버전 이후 Hooks
라는 기능이 도입되어 함수형 컴포넌트에서도 상태 관리가 가능하게 되었다.

useState() 함수 사용법

Counter.js

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;

import React, { useState } from "react";

useState를 사용하기 위해서는 가장 먼저 위와 같이 리액트 패키지에서 useState 함수를 불러와야 한다.

const [상태 값 저장 변수 , 상태값 변경해주는 setter 함수] = useState(상태 초기 값);

useState 함수를 호출하면 위처럼 배열을 반환하게 된다.
첫 번째 원소는 현재 상태 값을 저장하는 변수이고, 두 번째 원소는 상태 값을 바꿔주는 setter 함수다.

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

상태 값 저장 변수가 아니라 setter 함수(setNumber)를 사용해서, 파라미터로 전달받은 값을 최신상태로 바꿀 수 있다.