React Hook 이해하기 - useState (State Hook)

 

React Hook, useState

useState는 state를 함수 컴포넌트 안에서 사용할 수 있도록 해준다.

기존에는 state를 추가하고, 변경하고 싶을 때 클래스(Class) 컴포넌트로 바꾸어 사용했으나,

이제 함수형 컴포넌트안에서 Hook을 이용해 state를 사용할 수 있다.

 

 

Hook의 규칙

• 최상위 레벨에서만 Hook을 호출해야 한다.
• 오직 React 함수 내에서만 Hook을 호출해야 한다.

 

useState를 사용하여 state 초기화 하기

import React, { useState } from 'react';

export default function Sample() {
	// 새로운 state 변수 선언 및 할당
    const [count, setCount] = useState(0);
}

 위 코드에서 useState(0) 부분이

count 변수에 default 값을 0 으로 설정하겠다는 것이다.

 

useState의 인자로 넘겨 주는 값은 해당 state의 초기값이다.

클래스 컴포넌트의 this.state.count & this.setState와 유사하다.

 

 

useState를 사용하여 state 가져오기

기존 Class Component 방식

<p> 총 { this.state.count } 번 클릭 했습니다.</p>

Functional Component 방식

<p> 총 { count } 번 클릭했습니다.</p>

 

 

 

state 갱신방법

클래스 컴포넌트에서는 this.setState() 를 사용해 갱신하였지만,

함수형 컴포넌트에서는 setCount(변경값) 같은 형식으로 this를 호출하지 않고

useState()를 할당했을 때 지정한 set변수명(값) 으로 갱신한다.

<button onClick={() => setCount(count + 1)}>
	클릭
</button>

 

 

 

 

2020/05/25 - [Front/React] - React Hook 이해하기 - useEffect (Effect Hook)

2020/05/22 - [Front/React] - 리덕스(Redux), 리덕스 미들웨어(Redux-Middleware) 이해하기

2020/05/22 - [Front/React] - Create-React-App으로 React 시작하기

 

 

 

출처

React 공식 레퍼런스