React Native로 앱을 개발할 때, 데이터 관리는 필수적입니다. 사실 거의 모든 응용서비스에서 필수죠. 이번에는 React에서 화면에 표시되는 텍스트, 숫자, 버튼의 상태 등은 모두 데이터이며, 이를 효과적으로 다루려면 상태 관리(State Management) 방법에 대해 정리해 보겠습니다.

데이터 처리와 API 연동
상태 관리(State Management)
React Native로 앱을 만들다 보면 "데이터"라는 개념이 빠질 수 없어요. 화면에 보이는 숫자, 텍스트, 버튼의 상태 같은 것들이 바로 데이터인데, 이걸 잘 다루려면 상태 관리라는 기술을 알아야 합니다. 상태는 쉽게 말해 앱이 기억하고 있는 정보예요. 예를 들어, 버튼을 눌렀을 때 화면에 숫자가 1씩 늘어나게 하고 싶다면, 그 숫자를 앱이 "기억"하고 있어야겠죠? 이 기억을 관리하는 게 바로 상태 관리입니다.
useState로 데이터 관리하기
React Native에서 가장 쉽게 데이터를 다룰 수 있는 도구가 useState예요. 이건 마치 앱에 작은 메모장을 만들어 주는 것과 같아요. 예를 들어, 버튼을 누를 때마다 숫자가 올라가는 카운터를 만들어 봅시다.
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
function Counter() {
const [count, setCount] = useState(0); // count: 상태, setCount: 상태를 변경하는 함수
return (
<View>
<Text>현재 숫자: {count}</Text>
<Button title="1 증가" onPress={() => setCount(count + 1)} />
</View>
);
}
- useState(0)은 초기값을 0으로 설정한 메모장을 만드는 거예요.
- count는 그 메모장에 적힌 숫자이고, setCount는 숫자를 새로 쓰는 펜이에요.
- 버튼을 누르면 setCount(count + 1)가 호출되면서 숫자가 1씩 늘어나는 거죠.
Context API로 앱 전역 데이터 관리하기
하지만 앱이 커지면 문제가 생겨요. 예를 들어, 로그인한 사용자의 이름을 앱 곳곳에서 보여주고 싶다면, 모든 화면에 useState를 쓰는 건 비효율적이죠. 이걸 해결하려고 Context API라는 도구가 나와요. Context API는 앱 전체에 데이터를 공유할 수 있는 공용 메모장 같은 역할을 합니다.
다음은 사용자 이름을 앱 전체에 공유하는 예시입니다.
import React, { createContext, useContext } from 'react';
import { View, Text } from 'react-native';
// Context 생성
const UserContext = createContext();
function App() {
const user = { name: '홍길동' };
return (
<UserContext.Provider value={user}>
<UserProfile />
</UserContext.Provider>
);
}
function UserProfile() {
const user = useContext(UserContext); // Context에서 데이터 가져오기
return <Text>사용자 이름: {user.name}</Text>;
}
- UserContext를 생성해 공용 메모장을 준비합니다.
- UserContext.Provider로 감싸면서 value에 공유할 데이터를 지정합니다.
- 소비 측(UserProfile)에서는 useContext(UserContext)를 통해 공용 데이터에 바로 접근합니다.
여기서 중요한 점은 Provider로 컴포넌트를 감싸지 않으면 useContext에서 데이터를 제대로 가져오지 못한다는 것입니다.
Axios와 Fetch 사용법
앱을 만들다 보면 외부에서 데이터를 가져와야 할 때가 많아요. 예를 들어, 날씨 정보를 보여주거나 뉴스를 띄우려면 인터넷에 있는 데이터를 가져와야 하죠. 이걸 가능하게 하는 게 바로 API(Application Programming Interface)예요. API는 다른 서비스(서버)에서 데이터를 안전하고 편리하게 요청/응답하도록 마련된 규칙입니다.
예를 들어, 우리가 배달 앱에서 메뉴를 볼 때, 그 메뉴 정보는 배달 업체 서버에서 가져오는 거예요. 이 과정에서 앱은 업체의 API를 호출해서 데이터를 받아오는 식이죠. React Native에서도 똑같이 외부 API를 호출해서 데이터를 가져올 수 있어요.
Fetch를 활용한 기본 호출 방법
React Native에는 기본으로 제공되는 Fetch 도구가 있어요. 이걸로 간단히 데이터를 가져와 봅시다.
import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
function Weather() {
const [weather, setWeather] = useState('');
useEffect(() => {
fetch('https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=YOUR_API_KEY')
.then(response => response.json())
.then(data => {
// data.weather가 배열 형태이므로 [0]을 사용
setWeather(data.weather[0].description);
})
.catch(error => console.log('에러 발생:', error));
}, []);
return <Text>오늘 서울 날씨: {weather}</Text>;
}
- fetch() 함수는 주어진 URL로 네트워크 요청을 보내고, 응답을 받아옵니다.
- response.json()으로 응답을 JSON 형태로 변환해 사용할 수 있습니다.
- 데이터 요청을 앱이 시작할 때 한 번만 실행하고 싶다면 useEffect의 두 번째 인자로 빈 배열 []을 넣어 마운트 시점에만 실행되도록 설정합니다.
Axios 사용하기
Fetch도 좋지만, 좀 더 편리한 도구로 Axios라는 라이브러리가 있어요. Axios는 Fetch보다 코드가 간결하고 에러 처리가 쉬워서 실무에서 많이 쓰여요. 먼저 프로젝트에 설치해야 해요.
npm install axios
그리고 이렇게 사용하면 됩니다.
import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';
function Weather() {
const [weather, setWeather] = useState('');
useEffect(() => {
axios.get('https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=YOUR_API_KEY')
.then(response => {
setWeather(response.data.weather[0].description);
})
.catch(error => console.log('에러 발생:', error));
}, []);
return <Text>오늘 서울 날씨: {weather}</Text>;
}
Axios는 response.data로 바로 데이터에 접근할 수 있어서 Fetch보다 깔끔하죠. 실무 팁 하나 드리자면, API 키(YOUR_API_KEY)는 절대 코드에 직접 쓰지 말고 환경 변수 파일(. env)에 숨기는 게 좋아요. 나중에 프로젝트가 커지면 보안 문제가 될 수 있거든요.
'모바일 프로그래밍 언어 > React Native' 카테고리의 다른 글
네비게이션과 화면 전환 React Navigation 설치부터 화면 이동까지 - React Native #5 (0) | 2025.02.21 |
---|---|
모바일 앱 개발을 위한 UI 구성과 스타일링 - React Native #4 (0) | 2025.02.18 |
React Native의 컴포넌트, JSX, Props와 State - 모바일 앱 개발 초보자를 위한 React Native #3 (0) | 2025.02.13 |
React Native 개발 환경 설정 - 모바일 앱 개발 초보자를 위한 React Native #2 (0) | 2025.02.08 |
React Native란 - 모바일 앱 개발 초보자를 위한 React Native #1 (0) | 2025.01.23 |