[공부하면서 쓰는 React] useState의 의미와 사용법

useState 

의미 : 리액트의 기본적인 hook이며 함수형 컴포넌트에서 가변적인 상태를 가지게 해줍니다. 초기값 설정, 상태 업데이트 함수, 비동기 처리 등의 특징 통해 React 유연성을 극대화하며, 작은상태부터 큰 애플리케이션 상태까지 넓게 사용할 수 있습니다. 

 

 

useState의 기본 형태

const [state,setState] = useState(initialstate)

 

state : 현재 상태값을 의미합니다. 

setState : 상태값을 변경하는 함수 

initialState: state의 초기 설정값입니다. 어떤 유형의 값이든 지정할 수 있지만 함수에 대해서는 특별한 동작이 있습니다. 

(리액트 공식문서) 

 

예를 들면 카운터 상태를 변경해줘야 할 경우엔 다음과 같이 입력합니다. 

import React, { useState } from 'react';

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        count 증가
      </button>
    </div>
  );
}

 

이 코드에서 현재 상태 값은 count이며 setCount의 경우 버튼을 눌렀을때  count 상태가 변하는 값입니다.

누를수록 count가 증가하게 됩니다. 

 

특징 정리 

1.  useState는 hook이기 때문에 컴포넌트의 최상위 레벨이나 직접 만든 hook에서만 호출할수 있음 

2.  상태 값 업데이트의 경우 setState 함수로 상태를 업데이트하면 컴포넌트가 다시 렌더링됩니다. 

3.  여러개의 상태 관리가 가능합니다. 

const [email,setEmail] = useState(""); // 기본값은 빈 문자열
const [password,setPassword] =useState(0)