240520 TIL

useState

useState는 React에서 상태를 관리하기 위한 훅 중 하나입니다. 이를 사요하면 함수형 컴포넌트에서도 상태를 지역적으로 관리할 수 있습니다.

기본 구조

import {useState} from 'react';

function Example() {
  // useState 훅을 사용하여 상태와 상태를 변경하는 함수를 선언합니다.
  const [state, setState] = useState(initialState);
  
  return (
    <div>
    	{/* 상태를 사용하는 컴포넌트의 JSX */}
    </div>
    );
}

여기서 useState는 배열을 반환하며, 첫 번째 요소는 현재 상태를 가지고 있고, 두 번째 요소는 해당 상태를 변경하는 함수입니다. useState의 인자로 초기 상태 값을 전달합니다.

예시

import {useState} from 'react';

funcion Counter () {
  const [count, setCount] = useState();
  
  return (
  	<div>
      <p>You Clicked {count} times</p>
      {/*버튼을 클릭하면 setCount 함수를 호출하여 count 값을 변경합니다*/}
      <button onClick={() => setCount(count+1)}>
        Click me
      </button>
    </div>
  );
}

이 경우, count는 현재의 상태값을 의미하며, setCount는 count의 값을 변경하는 함수입니다. 버튼을 클릭할 때마다count가 1씩 증가하고, 이를 화면에 표시합니다.

useState는 클래스 컴포넌트의setState와 유사한 역할을 합니다. 하지만 클래스 컴포넌트에서는 상태를 객체로 관리하는 반면, useState는 각 상태를 개별적으로 관리할 수 있어 코드를 더욱 간결하게 작성할 수 있습니다. 이를 통해 함수형 컴포넌트에서도 상태를 효율적으로 관리할 수 있습니다.