[React Native] React Hook useState 완벽 정리

함수형 Compoent에서는 State 상태관리, LifeCycle 생명주기를 사용할 수 없어서 Hook이라는 개념을 사용한다고 설명드렸어요

함수형, 클래스형 Component에 대한 설명은 아래 게시글에 정리해두었으니 한번 읽어보시면 좋을것 같아요!

[React Native ] Component , Props 한번에 끝내기

 

React Native를 사용하면서 가장 기본적이면서도 중요한 State Management 중 하나는 React의 useState Hook입니다.

이번 포스팅에서는 useState에 대해 자세히 알아볼게요

 

내용 시작하기전에 이번 글에 포함되어 있는 예제 코드는 아래 주소에서 확인 가능합니다

GitHub - choseungyoon/ReactNative_Study_Chapter_1: ReactNatvie Chapter 1 학습 자료입니다.

---

React Hook - useState

useState란?

useState는 React에서 제공하는 Hook 중 하나로, 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해줍니다.

기본적으로 다음과 같은 형태로 사용됩니다.

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

state는 현재 상태 값을 나타냅니다.

setState는 상태를 변경하기 위함 함수에요.

initialState는 state의 초기 값을 의미합니다. 

 

간단한 useState 예제

텍스트를 입력하면 화면에 그대로 출력하는 간단한 예제를 한번 같이 볼게요

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

export default function App() {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="여기에 텍스트를 입력하세요"
        onChangeText={input => setText(input)}
        value={text}
      />
      <Button title="제출" onPress={() => alert(`입력한 텍스트: ${text}`)} />
      <Text>입력한 텍스트: {text}</Text>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

 

실행결과부터 같이 확인해볼게요

Text를 입력하면 이를 화면에 보여주는 간단한 예제입니다. 

Text 입력 예제 실행 결과

 

TextInput 컴포넌트에 입력할때마다 onChangeText 함수가 실행됩니다.

이때 setText 함수가 실행되어 text의 값을 업데이트합니다. 

이렇게 업데이트된 값을 하단 Text에서 보여주고 있어요

 

여러 상태 관리 예제

우리에게 익숙한 회원가입 화면을 상상해볼까요?

이메일, 비밀번호 , 생년월일 등 입력해야 하는 값이 여러개일 경우가 많습니다. 

이렇게 여러 값의 상태를 관리할 때도 useState를 사용할 수 있어요

나이와 이름을 입력하는 간단한 예제를 살펴볼게요!

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

export default function App() {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="이름을 입력하세요"
        onChangeText={input => setName(input)}
        value={name}
      />
      <TextInput
        placeholder="나이를 입력하세요"
        onChangeText={input => setAge(input)}
        value={age}
      />
      <Button
        title="제출"
        onPress={() => alert(`이름: ${name}, 나이: ${age}`)}
      />
      <Text>이름: {name}</Text>
      <Text>나이: {age}</Text>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  }
});

이번에도 실행결과 부터 확인해보겠습니다!

이렇게 useState을 여러개 사용해서 필드를 관리할 수 있습니다. 

useState는 상태 관리의 기본 중의 기본이에요.  이를 이해하고 사용할 줄 알면 React Native에서도 매우 다양한 상황에 적용하여 더 나은 사용자 경험을 제공할 수 있을것 같아요

예제 코드를 통해 구체적인 사용법과 적용 사례를 확인하셨다면, 이제 직접 만들고 싶은 화면을 간단하게라도 한번 만들어보세요!