[React] 리액트 - useState

React에서 useState는 함수형 컴포넌트에서 상태 관리를 가능하게 해주는 훅(hook)이다.
이 훅을 사용하면 컴포넌트 내에 상태(state)를 생성하고, 이 상태를 업데이트할 수 있다.

상태란 해당 컴포넌트의 데이터 또는 속성을 의미하며,
이 데이터가 변할 때마다 React는 컴포넌트를 다시 렌더링한다.

useState 사용법

useState는 초기 상태 값을 파라미터로 받고, 상태 값과 그 상태를 설정하는 함수를 배열 형태로 반환한다.

[useState 기본구조]

• state: 현재 상태의 값
• setState: 상태를 업데이트하는 함수
• initialState: 상태의 초기 값

const [state, setState] = React.useState(initialState);

 

useState는 0을 초기 상태 값으로 사용하여 counter라는 상태를 생성한다.
counter는 현재 클릭 수를 저장하는 변수이고,
setCounter는 counter를 업데이트하는 함수이다.

const [counter, setCounter] = React.useState(0);

 

상태 업데이트 방법

setCounter 함수는 counter 상태를 업데이트하기 위해 호출된다.

이 함수를 호출할 때 새로운 상태 값을 직접 넘겨줄 수도 있고,
현재 상태를 기반으로 계산된 값을 넘겨줄 수도 있다.

 

아래에서 onClick 함수는 사용자가 버튼을 클릭할 때 호출되는 함수이다.
함수 내부에서 setCounter를 사용하여 counter 값을 현재 값에서 1 증가시킨다.

React는 이 상태 변경을 감지하고,
App 컴포넌트를 다시 렌더링하여 화면에 최신 클릭 수를 표시합니다.

const onClick = () => {
    setCounter(counter + 1);
};

 

useState를 사용하면 컴포넌트 내부의 상태를 쉽게 관리할 수 있고, 상태에 의존하는 UI가 자동으로 업데이트되어 동적인 사용자 경험을 제공할 수 있다. 이러한 특성은 React 애플리케이션의 반응성을 높이는 데 중요한 역할을 한다.