리액트네이티브에서 CreateContext를 이용해 로그인을 관리하는 코드 예제이다.
AuthContext.js 파일 import React, { createContext, useState } from 'react';
// Context 생성 export const AuthContext = createContext(); // Provider 컴포넌트 export const AuthProvider = ({ children }) => { const [user, setUser] = useState(null); // 로그인 함수 const login = (username, password) => { // 실제로는 서버와 통신해야 하지만 여기서는 예시로 단순 처리 if (username === 'test' && password === '1234') { setUser({ username }); } else { alert('로그인 실패'); } }; // 로그아웃 함수 const logout = () => { setUser(null); }; return ( <AuthContext.Provider value={{ user, login, logout }}> {children} </AuthContext.Provider> ); }; App.js 파일 import React, { useContext, useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native'; import { AuthProvider, AuthContext } from './AuthContext'; const LoginScreen = () => { const { user, login, logout } = useContext(AuthContext); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); if (user) { return ( <View> <Text>환영합니다, {user.username}!</Text> <Button title="로그아웃" onPress={logout} /> </View> ); } return ( <View> <View style={{ height: 100 }} /> <TextInput placeholder="아이디" value={username} onChangeText={setUsername} /> <TextInput placeholder="비밀번호" secureTextEntry value={password} onChangeText={setPassword} /> <Button title="로그인" onPress={() => login(username, password)} /> </View> ); }; export default function App() { return ( <AuthProvider> <LoginScreen /> </AuthProvider> ); } |