리액트 훅 useState

useState는 React에서 컴포넌트의 상태(state)를 관리하기 위한 가장 기본적인 훅(Hook)입니다.

useState는 함수형 컴포넌트 내에서 상태를 선언하고 그 상태를 업데이트하는 방법을 제공합니다.

 

 

useState의 기본문법

useState는 React에서 import하여 사용할 수 있고, 이러한 문법을 가집니다.

 

const [ state , setState ] = useState(initialValue);

state는 컴포넌트에서 관리할 상태 값입니다. 기본적으로 useState에 전달된 초기 값 을 가집니다.

setState는 상태 변경 함수 입니다. setState를 호출하면 컴포넌트는 상태가 변경된 것을 감지하고 다시 렌더링 됩니다.

initialValue는 상태의 초기값 입니다. 숫자 , 문자열 , 배열 , 객체 등 모든 데이터 유형을 설정할 수 있습니다.

 

쉽게 말하면

const [변수 , 상태업데이트함수] = useState(초기 값);
구조는 이렇게 생각하면 쉽습니다.

상태업데이트함수( 이 안에 값을 넣으면 ) useState의 초기 값 에 실시간으로 반영이 되고

그 반영된 값을 변수를 이용해 출력합니다.

 

useState의 작동 방식

 

이 코드에선 count라는 상태 값과 setCount라는 상태 업데이트 함수가 있습니다.

<p> 의 count엔 현재 useState의 초기값 0 이 들어가있고

<button>을 클릭할때마다 setCount가 호출되어서 count + 1 을 통해 count값이 1씩 증가하고
useState에 실시간으로 반영되어 <p>의 count에 바로 렌더링되어 화면에 업데이트 됩니다.

 

 

주의할 점 

상태는 비동기적으로 업데이트 된다.

상태 업데이트는 비동기적으로 동작할 수 있습니다.

만약 상태가 이전 상태에 의존한다면 상태 업데이트함수 형태로 전달하는 것이 더 안전 하다.