⚛️ React Native에서의 State 관리 방법

React Native 문법

초급 난이도
문법 타입
10/31 등록일

React Native에서의 State 관리 방법

초급
태그
기초 문법 입문 useState context-api
## 개요
React Native 앱에서 데이터 상태를 변경하고 화면에 반영하는 기능을 제공합니다. 사용자 입력, 네트워크 요청 결과 등 동적인 데이터 처리에 필수적입니다.

## 주요 특징
- useState 훅으로 간단한 상태 관리 가능
- Context API로 중앙 집중식 상태 관리 구현
- Redux와 같은 외부 라이브러리 연동 지원
- 이벤트 핸들링 시 상태 업데이트 자동 트리거

## 사용법
```javascript
// 기본 사용 예제
const [count, setCount] = useState(0);

function increment() {
setCount(prev => prev + 1);
}

// Context API 사용 예제
const MyContext = React.createContext();

export default function App() {
const [theme, setTheme] = useState('light');
return (
<MyContext.Provider value={{ theme, setTheme }}>
<Main />
</MyContext.Provider>
);
}
```

## 주의사항
- 상태 변경 시 setState를 직접 호출해야 함 (함수형 업데이트 패턴 필수)
- 복잡한 상태 관리는 Redux나 MobX 사용 권장
- 불필요한 상태 재설정으로 성능 저하 방지
- useEffect 훅으로 부작용 처리 시 주의

## 관련 문법
- useContext: Context API로 상태 공유
- useEffect: 컴포넌트 라이프사이클 관리
- Redux Toolkit: 복잡한 상태 관리 프레임워크
코드 예제
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

export default function StateExample() {
  const [text, setText] = useState('안녕하세요');
  const [isBold, setIsBold] = useState(false);

  return (
    <View style={{ padding: 20 }}>
      <Text style={isBold ? { fontWeight: 'bold' } : null}>{text}</Text>
      <Button 
        title="텍스트 변경"
        onPress={() => setText('React Native 학습 중!')}
      />
      <Button
        title="볼드 토글"
        onPress={() => setIsBold(!isBold)}
      />
    </View>
  );
}
등록일: 2025년 10월 31일 02:32
언어 정보
언어
React Native
카테고리
Mobile
인기도
#29
학습 팁
코드를 직접 실행해보세요
변수를 바꿔가며 실험해보세요
오류가 나도 포기하지 마세요
다른 예제도 찾아보세요