[React Native] Hooks - useState

1. useState

useState는 React와 React Native 개발에서 상태 관리를 위해 사용되는 기본적인 Hooks 중 하나다.

함수형 컴포넌트에서 상태를 가질 수 있게 해주며, 이를 통해 컴포넌트를 동적으로 관리할 수 있다.

 

useState는 두 가지 요소를 배열 형태로 반환한다.

기본 형태는 아래와 같고 여기서 initialState는 상태의 초기값, state는 현재 상태의 값, setState는 상태를 업데이트하는 함수다.

 

useState를 사용함으로써 컴포넌트의 상태를 함수 내부에서 관리할 수 있게 되고 이 상태가 변경될 때마다 컴포넌트가 리렌더링된다.

import React, { useState } from 'react';

const [state, setState] = useState(initialState);

 

 

2. 예시 코드

아래 코드는 useState를 사용하는 간단한 예시로 버튼을 클릭할 때마다 카운터의 값이 증가하는 기능을 구현했다.

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

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

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>현재 카운터 값: {count}</Text>
      <Button
        title="카운터 증가"
        onPress={() => setCount(count + 1)}
      />
    </View>
  );
};

export default CounterApp;

위 코드에서는 useState를 사용해서 count 상태를 선언하고, count 상태를 setCount 함수로 업데이트 할 수 있다.

 

버튼을 누를 때마다 setCount함수가 호출되어 count 상태가 업데이트되고 컴포넌트가 리렌더링 되면서 화면에 업데이트된 count값이 출력된다.