수업을 듣고 내용을 정리한 글입니다.

useState 란?

React에서 상태(State)를 관리하기 위해 사용하는 Hook 중 하나인 useState() 는 함수형 컴포넌트에서 상태를 추가하고 변경할 수 있도록 하는 역할을 합니다.

useState() 를 이용해 변수를 선언하면 하나의 배열 형태로 선언됩니다. 또한 초기값을 지정할 수 있습니다.

import React, { useState } from "react";
const consoleTest = useState("콘솔닷로그"); // 초기값 지정
console.log(consoleTest); // (2) ["콘솔닷로그", ƒ bound dispatchSetState()]

첫 번째 요소는 현재 상태의 값이며, 두 번째 요소는 함수 형태인데, useState() 로 선언한 변수의 값을 변경하는 함수로, setter 와 비슷한 개념입니다. 이 함수로 useState() 로 선언한 변수의 현재 상태를 변경할 수 있습니다.

useState 활용하기

useState() 와 onClick event 를 함께 사용하여 동적인 상태를 만들고 처리할 수 있습니다. 다음은 useState() 와 onClick event 를 사용하여 상태값을 변경하는 여러 예시입니다.

import React, { useState } from "react";

const App = () => {
	const [answer, setAnswer] = useState(true);

	const handleClick = () => {
		setAnswer(!answer); // 현재 상태값의 반대로 변경
	};

	return (
		<div>
			<h1>지금 배고프신가요?</h1>
			<h2>{answer ? "Yes" : "Absolutely"}!</h2>
			<button onClick={handleClick}>Change answer</button>
		</div>
	);
};

useState() 를 이용하여 answer 의 초기값을 true 로 선언하고, 버튼이 클릭될 때 마다 answer 의 값이 반대로 변경되도록 하였습니다.

다음 예제입니다.

import React, { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);

  const increaseCount = () => {
    setNumber(number + 1); // (현재 값) + 1
  };
  
  const decreaseCount = () => {
    setNumber(number - 1); // (현재 값) - 1
  };

  return (
    <div>
      <h1>간단한 카운터</h1>
      <div>
        <button onClick={increaseCount}>+1</button>
        {number}
        <button onClick={decreaseCount}>-1</button>
      </div>
    </div>
  );
};

useState() 를 이용하여 number 의 초기값을 0 으로 선언하였습니다. 그리고 +1 버튼을 누르면 현재 값에 1을 더하고, -1 버튼을 누르면 현재 값에서 1을 뺍니다.