React Native useState Hook 상태관리

사용자와의 상호작용

을 할 때 유저 인터페이스의 변화를 주기위해서는 state를 사용해야합니다.

가장 기본적인 방법으로는 useState() 함수를 사용하는 것입니다.

리액트에서는 use 로 시작하는 다양한 함수들이 있는데, 이를 Hook이라고 부릅니다.

 

Hook을 이용하여 상태관리, 최적화, 컴포넌트 작동 흐름 관리 등 다양한 기능을 구현할 수 있습니다.

그중에서 useState는 상태 값을 관리하는 함수입니다.

 

Hook의 규칙

1. Hook은 컴포넌트의 최상위 레벨이서만 사용해야한다.
2. 여러 훅을 직접 만들 수 있는데, 이를 custom Hook이라고 한다. react 패키지 외에 불러오는 Hook은 모두 custom Hook이다.
3. Hook은 custom Hook 또는 함수 컴포넌트에서만 사용가능하다.(클래스나,일반적인 자바스크립트 함수에서 사용하면 오류 발생)

간단한 카운터 실습

App.js

import React, {useState} from 'react';
import {SafeAreaView} from 'react-native';

import Counter from './components/Counter';

const App = () => {
  const [count, setCount] = useState(0);
  const onIncrease = () => setCount(count + 1);
  const onDecrease = () => setCount(count - 1);
  return (
    <SafeAreaView style={{flex: 1}}>
      <Counter count={count} onIncrease={onIncrease} onDecrease={onDecrease} />
    </SafeAreaView>
  );
};

export default App;

Counter.js

import React from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';

function Counter({count, onIncrease, onDecrease}) {
  return (
    <View style={styles.container}>
      <View style={styles.numberArea}>
        <Text style={styles.number}>{count}</Text>
      </View>
      <Button title={'+1'} onPress={onIncrease} />
      <Button title={'-1'} onPress={onDecrease} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  numberArea: {
    flex: 1,
    alignContent: 'center',
    justifyContent: 'center',
  },
  number: {
    fontSize: 72,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default Counter;