useState를 설명하기에 앞서 먼저 Hook에 대해서 설명하겠다.
React 공식문서에서 아래와같은 내용을 확인 할 수 있다.
Hook은 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다.
Hook은 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공합니다.
위의 내용처럼 useState는 Hook API 중 하나이고 React 16.8 이상에서 사용할 수 있으며 Class안에서는 동작하지 않는다.이 점을 꼭 유의해서 사용하도록 하자.
이제 본격적으로 useState에 대해서 설명하겠다.
useState는 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용되고 이를 이용해 상태를 추가하고 해당 상태를 업데이트할 수 있다.
useState 사용법
useState를 사용하기 위해선 우선 import 하고 상태를 선언하고 해당 상태와 해당 상태를 업데이트할 함수를 가져와야 한다. 아래의 예제를 보자.
import React, { useState } from 'react';
function Example() {
// useState를 사용하여 count 상태와 setCount 함수를 선언
const [count, setCount] = useState(0);
// count를 업데이트하는 함수
const incrementCount = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={incrementCount}>Increase Count</button>
</div>
);
}
export default Example;useState(0)은 초기값이 0인 count라는 상태를 생성한다. setCount는 count 상태를 업데이트하는 함수다. 이 함수를 호출하면 리액트는 컴포넌트를 다시 렌더링한다.
incrementCount 함수는 버튼을 클릭할 때마다 count 상태를 증가시키는 역할을 한다. 이 함수는 setCount를 호출하여 count 상태를 이전 값에서 1씩 증가시킨다.
useState 훅은 단일 상태 뿐만 아니라 객체나 배열과 같은 복잡한 데이터 구조를 관리할 수도 있다. 이를 통해 여러 개의 상태를 한 번에 처리할 수 있다. 이러한 방식으로, 함수형 컴포넌트에서도 상태를 효과적으로 관리할 수 있다
useState의 대괄호는 무슨 역할인가?
const [fruit, setFruit] = useState('banana');대괄호 안의 내용을 기본값이다. 'setFruit'로 값을 넣지 않는이상 'fruit'는 'banana' 인 것이다.
객체도 가능한가?
const [userList,setUserList] = useState({
username : 'Hong gil dong',
email : 'gildong00@example.com'
})위와 같은 형태로도 사용이 가능하며 모든 속성을 업데이트 해야 할때 유용하다. 사용할때는 조금 편리하게 하기 위해 아래처럼 구조분해 할당을 하면된다.
const [userList,setUserList] = useState({
username : 'Hong gil dong',
email : 'gildong00@example.com'
})
const [username,email] = userList;
위처럼 useState기능이 추가되고서 함수형 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트로 바꿔야 할일은 사라졌고 함수형 컴포넌트 안에서 useState를 활용하여 추가 및 관리 할 수 있게 됐다.
useState의 좀더 본격적인 활용과 Hook 규칙에 대해서는 useEffect를 하며 좀더 자세하게 설명하겠다.
모르겠으면 아래의 React 공식 문서를 꼭 보자.