[React]useState

보통 html에서 값을 변경하면 웹페이지에서 새로고침을 해야 변경 된 값이 보이는데 리액트에서는 useState를 사용하면 페이지의 새로고침 없이 데이터 변경이 이루어 집니다.

 

useState 개요

useState는 리액트 16.8 버전에 도입되었으며, 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다. 

클래스 컴포넌트에서 사용했던 state와 setState 기능을 대체할 수 있습니다. 

상태 값을 쉽게 생성하고 업데이트할 수 있어 컴포넌트의 상태 관리가 간편해집니다.

 

useState 사용법

 1. useState를 import하여 사용합니다.

 2. useState 함수를 호출하면 상태 값과 상태 업데이트 함수를 반환합니다. 

 3. 상태 값과 상태 업데이트 함수를 구조 분해 할당하여 사용합니다.

 4. 상태 업데이트 함수를 통해 상태 값을 변경하면 컴포넌트가 재렌더링됩니다.

 

useState 예시

import { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0); //숫자0의 값을 대입한 것

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

const [count, setCount] = useState(0);

보통 useState를 사용하면 변수가 두개가 대입 됩니다. 첫번째 변수는 useState의 값이고 두번째 변수는 useState의 값을 변경할때 사용되는 함수입니다. setCount가 값을 변경할때 사용되는 함수인 것입니다.

 

useState의 장점

 클래스 컴포넌트에 비해 코드가 간결해집니다.

 상태 관리가 쉬워져 컴포넌트 로직을 더 잘 이해할 수 있습니다.

 함수형 프로그래밍 스타일을 지원하여 코드 재사용성이 높아집니다.