React Native에서 상태 관리하기 (useState, useEffect 활용법)
안녕하세요! 이번 글에서는 React Native에서 상태(state)를 관리하는 방법을 다뤄보겠습니다.
앱을 만들다 보면 사용자의 입력을 저장하거나, API에서 데이터를 불러와 화면에 반영해야 하는 경우가 많습니다.
처음 React Native를 사용할 때는 그냥 변수에 값을 저장하면 될 거라고 생각했는데, 화면이 제대로 업데이트되지 않더라고요.
이게 바로 React의 핵심 개념인 "상태 관리" 때문이었습니다.
이 글에서는 React Native에서 상태(state)를 관리하는 기본적인 방법인 useState와 useEffect를 활용하는 법을 정리해보겠습니다.
1. 상태(state)란? 왜 필요한가?
📌 **상태(state)**는 컴포넌트의 데이터를 저장하고, 값이 변경될 때 자동으로 화면을 업데이트해주는 역할을 합니다.
👉 단순 변수(let count = 0;)를 사용하면 값은 바뀌지만, 화면이 다시 렌더링되지 않음.
👉 React에서 상태 관리는 화면을 자동으로 업데이트하는 데 필수적임.
예를 들어, 버튼을 눌러 카운터 값을 증가시키는 기능을 만들 때, useState를 사용하지 않으면 화면이 바뀌지 않습니다.
2. useState를 사용한 상태 관리
📌 **useState는 가장 기본적인 상태 관리 훅(Hook)**으로, 컴포넌트가 값을 저장하고 변경할 수 있도록 도와줍니다.
먼저, 간단한 카운터 예제를 만들어볼게요.
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<Text style={styles.text}>카운트: {count}</Text>
<Button title="증가" onPress={() => setCount(count + 1)} />
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
text: { fontSize: 20, marginBottom: 10 },
});
export default Counter;📌 코드 설명
- useState(0) → 초기값을 0으로 설정
- count → 현재 카운트 값을 저장
- setCount(count + 1) → 버튼을 누르면 count 값이 증가하고 화면이 다시 렌더링됨
👉 이전에는 그냥 let count = 0;으로 했는데, 그 방식으로 하면 버튼을 눌러도 화면이 바뀌지 않음.
👉 React에서는 useState를 사용해야 값이 변경될 때 자동으로 화면이 업데이트됨.
3. useEffect로 상태 변화 감지하기
📌 useEffect는 특정 값이 변경될 때 실행되는 함수입니다.
예를 들어, API 요청을 하거나, 특정 값이 변할 때 로그를 남기는 등의 작업을 할 수 있습니다.
아래 코드를 보면, 카운트 값이 변경될 때마다 console.log가 실행됩니다.
import React, { useState, useEffect } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
const CounterWithEffect = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`카운트 값이 변경됨: ${count}`);
}, [count]); // count 값이 바뀔 때마다 실행됨
return (
<View style={styles.container}>
<Text style={styles.text}>카운트: {count}</Text>
<Button title="증가" onPress={() => setCount(count + 1)} />
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
text: { fontSize: 20, marginBottom: 10 },
});
export default CounterWithEffect;📌 코드 설명
- useEffect(() => { ... }, [count]) → count 값이 변경될 때마다 실행됨.
- 콘솔 로그를 보면 버튼을 누를 때마다 카운트 값이 변경됨: 1, 카운트 값이 변경됨: 2 이런 식으로 출력됨.
- API 요청, 로컬 스토리지 저장, 애니메이션 트리거 등 다양한 곳에서 활용 가능!
👉 실제 앱에서는 API 데이터를 불러올 때 useEffect를 많이 사용함.
👉 예: 화면이 처음 렌더링될 때 API 요청을 실행하고, 데이터를 상태로 저장하기.
4. useState + useEffect로 API 데이터 불러오기
📌 실제로 API에서 데이터를 불러와 상태에 저장하는 예제를 만들어볼게요.
(이후 API 관련 글에서 더 자세히 다루겠지만, 미리 기본적인 흐름을 알아두면 좋음!)
import React, { useState, useEffect } from 'react';
import { View, Text, ActivityIndicator, FlatList } from 'react-native';
const DataFetchExample = () => {
const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then((json) => {
setData(json);
setLoading(false);
})
.catch((error) => console.error(error));
}, []);
return (
<View style={{ flex: 1, padding: 20 }}>
{loading ? (
<ActivityIndicator size="large" color="blue" />
) : (
<FlatList
data={data}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => <Text>{item.title}</Text>}
/>
)}
</View>
);
};
export default DataFetchExample;📌 코드 설명
- useState([]) → 데이터를 저장할 상태 생성
- useState(true) → API 요청 중 로딩 상태 관리
- fetch() → API에서 데이터 가져오기
- useEffect → 컴포넌트가 처음 렌더링될 때 한 번 실행됨
- setData(json) → 가져온 데이터를 data 상태에 저장
- FlatList → 리스트 형태로 데이터를 화면에 표시
👉 이렇게 하면 앱을 실행하면 API에서 데이터를 가져와 리스트로 표시할 수 있음!
👉 실제 프로젝트에서 API 요청을 할 때도 useEffect + useState 조합을 많이 사용함.
5. 정리 및 다음 단계
✅ useState로 상태를 관리하고, setState를 사용해 값을 변경할 수 있음.
✅ useEffect를 활용하면 특정 값이 변경될 때 실행되는 동작을 설정할 수 있음.
✅ API 데이터를 가져와 상태로 저장하는 방법도 useState + useEffect로 구현 가능.
📌 출처 및 참고 자료
📌 다음 글 예고: React Native에서 API 요청하고 데이터 가져오기
📌 (fetch, axios 활용법 + 상태 업데이트까지 포함!)
React Native 상태 관리를 이해하면 앱 개발이 훨씬 쉬워집니다! 😊
다음 글도 기대해주세요! 🚀