CreateContext2

리액트네이티브에서 CreateContext를 이용해 로그인을 관리하는 코드 예제이다.

  • AuthContext를 만들어 로그인 상태(user)와 login, logout 함수를 제공.
  • AuthProvider로 앱 전체를 감싸서 어디서든 로그인 상태를 접근 가능.
  • LoginScreen에서 useContext(AuthContext)를 사용해 로그인/로그아웃 처리.

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>
  );
}