React Native - Hooks

React Native State

react native ver16.8 이전의 버전에서는 state를 사용하려면 class형 Component를 사용해야 했다. 즉, 함수형 Component에서는 state를 사용할 수 없었다. state는 해당 Component가 가지고 관리하는 값들이기 때문에 객체 형태의 class형 Component에서만 사용하도록 통제되어 있었다.

하지만, ver16.8 이상에서는 함수형 Compnent에서도 state를 사용할 수 있게 되었다. 이를 Hooks라고 한다.

Hooks 사용법

import React, {useState} from 'react';
import {Text, TouchableOpacity, View} from 'react-native';

function Example() {
  // "count"라는 새로운 상태 값을 정의합니다.
  const [count, setCount] = useState(0);

  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>You clicked {count} times</Text>
      <TouchableOpacity onPress={() => setCount(count + 1)}>
        <Text>Click!!</Text>
      </TouchableOpacity>
    </View>
  );
}

export default Example;

 코드르 보면

  const [count, setCount] = useState(0);

이 부분을 볼 수 있다. 이 문법이 Hooks로 함수형 Component에서 state를 사용하는 방법이다.
[ count, setCount ] 는 배열 형태를 갖고 여기에 useState() 함수를 사용하여 state로 사용하겠다는 선언을 하는 것이다.
배열의 분할 할당을 이용하여 앞에 있는 변수가 state, 뒤에있는 변수는 해당 state를 set 하는 setState함수로 동작한다. 
userState에 있는 매개변수 ( 0 )은 state(count)의 초기화이다. 

다음은 출력 화면이다. 

Click!!을 누르면 You clicked {count} times의 count(state)가 올라가는 것을 확인할 수 있다.