리액트 네이티브와 Expo로 아이폰 앱 만들기: 홈 화면과 로그인 화면 구현

안녕하세요 

 

오늘은 리액트 네이티브를 사용해 간단한 앱을 작성해보겠습니다.

 

먼저 저는 아이폰을 사용하고 있고 최종 목표는 앱스토어에 배포하는 것으로 진행해보겠습니다.

 

expo.go를 사용하여 쉽게 개발을 할 수 있습니다.

 

앱스토어에서 expo.go를 다운받아줍니다.

 

그리고 리액티브 네이티브 공식문서를 확인하여 첫 프로젝트를 작성합니다.

https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

 

vs 코드에서 공식문서대로 따라하다 npx expo start 명령어를 실행하면

 

터미널에 QR 코드가 등장합니다. 

 

아이폰 카메라를 통해 해당 QR 코드를 연결하면 내가 작성한 앱이 expo.go를 통해 켜져 확인할 수 있습니다.

 

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import HomeScreen from "./screens/HomeScreen";
import LoginScreen from "./screens/LoginScreen";

const Stack = createStackNavigator();

export default function App() {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={({ navigation }) => ({
              title: "홈",
              headerRight: () => (
                <Button
                  title="로그인"
                  onPress={() => navigation.navigate("Login")}
                />
              )
            })}
          />
          <Stack.Screen
            name="Login"
            component={LoginScreen}
            options={{ title: "로그인" }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  }
});

 

네비게이션 기능을 사용하여 홈과 로그인창을 구현해보겠습니다.

 

위의 네비게이션 과 스택을 임포트하기 위해

 

터미널에서

 

npx install @react-navigation/native

 

npx install @react-navigation/stack

 

을 진행합니다.

 

 

 

 

 

screens라는 폴더를 작성하고 

 

HomeScreen.jsx

 

LoginScreen.jsx를 작성합니다.

 

다음은 HomeScreen.jsx 입니다.

 

import React from "react";
import { StyleSheet, Text, View, Button } from "react-native";

function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>Coffee Shop</Text>
      <Text style={styles.subTitleText}>
        Your one stop shop for artisanal coffee and tea.
      </Text>
      <Button
        title="Explore"
        onPress={() => navigation.navigate("Explore")}
        color="#8c6b52"
      />
      {/* 추천 상품 리스트는 나중에 추가하기 */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f7f7f7",
    alignItems: "center",
    justifyContent: "center",
    padding: 20
  },
  titleText: {
    fontSize: 30,
    fontWeight: "bold",
    color: "#371c07",
    marginBottom: 10
  },
  subTitleText: {
    fontSize: 16,
    color: "#8c6b52",
    textAlign: "center",
    marginBottom: 20
  }
});

export default HomeScreen;

 

다음은 LoginScreen.jsx 입니다.

 

import React, { useState } from "react";
import { StyleSheet, Text, View, Button, TextInput } from "react-native";

function LoginScreen({ navigation }) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = () => {
    // 로그인 로직이 들어갈 자리입니다. 현재는 간단히 console.log로 로그를 찍습니다.
    console.log(`email: ${email}, password: ${password}`);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.titleText}>Log in to Coffee Shop</Text>

      <View style={styles.inputContainer}>
        <Text>Email</Text>
        <TextInput
          style={styles.textInput}
          onChangeText={setEmail}
          value={email}
          placeholder="이메일"
        />
      </View>

      <View style={styles.inputContainer}>
        <Text>Password</Text>
        <TextInput
          style={styles.textInput}
          onChangeText={setPassword}
          value={password}
          placeholder="비밀번호"
          secureTextEntry={true} // 비밀번호 입력 시 표시 방식을 숨김으로 설정
        />
      </View>

      <Button title="로그인" onPress={handleLogin} color="#8c6b52" />

      <Text style={styles.forgotPassword}>비밀번호를 잊으셨나요?</Text>

      <Button
        title="이메일로 회원가입"
        onPress={() => navigation.navigate("Register")}
        color="gray"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f7f7f7",
    justifyContent: "center",
    padding: 20
  },
  titleText: {
    fontSize: 30,
    fontWeight: "bold",
    color: "#371c07",
    marginBottom: 20
  },
  inputContainer: {
    marginBottom: 10
  },
  textInput: {
    height: 40,
    borderWidth: 1,
    borderColor: "gray",
    borderRadius: 5,
    paddingLeft: 10,
    backgroundColor: "#fff"
  },
  forgotPassword: {
    color: "gray",
    textDecorationLine: "underline",
    marginTop: 20,
    marginBottom: 10,
    textAlign: "center"
  }
});

export default LoginScreen;

 

 

이제 아이폰을 확인하면 

 

간단한 앱 화면 창들을 확인 할 수 있습니다.

 

다음은 백엔드와 연결하여 좀더 다양한 기능들을 구현해 보겠습니다.

 

감사합니다.