React - useState hook의 사용법과 예제

 

Hook이란

기존의 React에서는 클래스 컴포넌트를 작성해야만 상태(state) 값 관리 및 여러 React의 기능등을 사용할 수 있었지만 , React 16.8버전부터 추가된 Hook을 이용하면 함수 컴포넌트에서도 상태관리등이 사용가능 하도록 되었습니다.

 

그렇다고 해서 클래스 컴포넌트가 필요 없는 것은 아니며, 상황에 따라 적절히 맞춰 사용 가능합니다.

 

useState Hook

기본적으로 배열 비구조화 할당문법으로 많이 사용 됩니다.

[state, setState] = useState(initialState);

파라미터

1. initialState
   • state의 초기값 설정

반환값

1. array (pair of values)
   • 이 배열은 아래와 같은 2개의 값을 가지고 있습니다.
     1. 현재의 상태 값(state)
     2. 상태값을 변경하는 함수(setState)

 

예제

1. 단일 상태값 관리하기

 - Class Component

 

 

 - Function Component(useState)

 

2. 여러개의 상태값 관리하기

 - Class Component

 

 - Function Component(useState)

 

 

또는 클래스 컴포넌트의 this.setState처럼 하나의 state를 오브젝트로 하여 여러 상태를 관리하는 방법도 있지만this.setState처럼 state를 병합하는 것이 아닌 대체하는 것임에 주의 하여야 합니다.