Skip to main content

5분 만에 React Native로 하이브리드 TodoApp 모바일앱 만들기

오늘은 ChatGPT와 함께 React Native로 하이브리드 앱 만들기를 한번 해보겠습니다. 참고로 ReactNative 공식가이드도 첨부 합니다. 모르는 부분이나 TodoApp 외 궁금한 부분들은 공식 문서를 참고 하시기 바랍니다.

1. ChatGPT에 프롬프트 요청 하기​

먼저 ChatGPT에게 아래와 같이 React Native로 하이브리드 앱을 만들어달라고 요청 합니다.

ChatGPT프롬프트
I'm very beginner as a developer, and I'm trying to develop a simple todo app with react native? give me the step by step guide to do this from ide setting with code example.
1) design: modern style design, material ui
2) teck stack: react native
3) features: list, add, update, delete

아래와 같이 ChatGPT가 답변을 해줍니다. 참고로 답변은 프롬프트 지니를 통해 번역된 결과 입니다.

먼저 React Native로 하이브리드 앱 작성 하는 코드를 잘 설명해주고 있습니다. React Native로 하이브리드 앱만들기 답변

그럼 ChatGPT가 알려준 것 처럼 ReactNative로 목록, 추가, 업데이트 및 삭제를 포함한 기능을 가진 현대적인 스타일의 디자인으로 TodoApp을 만드는게 가능한지 직접 만들어 보겠습니다.

React Native로 간단한 TodoApp을 빌드하려면 다음 단계를 따르세요.

코드 작성에 앞서 아래와 같이 폴더 구조도 미리 확인 할수 있습니다.

ChatGPT프롬프트
show folder structure

React Native TodoApp 폴더 구조

TodoApp/
│   App.js
│   app.json
│   babel.config.js
│   package.json
│   yarn.lock
│
└───src/
    │   Navigation.js
    │
    └───screens/
        │   HomeScreen.js

2. 코드작성하기​

위의 프롬프트 결과를 가지고 코드를 작성해 보겠습니다. 참고로 Prompt 결과를 기반으로 코드는 그대로 유지 하고 설명만 필요에 따라 변경 하였습니다.

2.1. 필수 구성 요소를 설치합니다.​

  • Node.js: https://nodejs.org/에서 최신 LTS 버전을 다운로드하여 설치합니다.
  • Yarn: npm install -g yarn을 실행하여 Yarn 패키지 관리자를 설치합니다.
  • Expo CLI: yarn global add expo-cli를 실행하여 Expo CLI를 설치합니다.

2.2. 새 React Native 프로젝트를 만듭니다.​

  • expo init TodoApp을 실행하여 새 프로젝트를 생성합니다.
  • 템플릿 선택(예: "공백" 또는 "공백(TypeScript)")
  • 프로젝트 디렉토리로 변경: cd TodoApp
expo init TodoApp
cd TodoApp

2.3. Material UI 및 기타 필수 패키지를 설치합니다.​

필수 패키지 설치 명령 실행

yarn add @react-navigation/native @react-navigation/stack react-native-paper @expo/vector-icons

2.4. 내비게이션 설정:​

src라는 이름의 새 폴더를 만들고 그 안에 다음 내용으로 Navigation.js라는 파일을 만듭니다.

src/Navigation.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

const Navigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

2.5. HomeScreen 구성 요소를 만듭니다.​

src 폴더에서 screens라는 새 폴더를 만들고 그 안에 다음 내용이 포함된 HomeScreen.js라는 파일을 만듭니다.

src/screens/HomeScreen.js
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { IconButton, TextInput, FAB, Text, List } from 'react-native-paper';

const HomeScreen = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleAddTodo = () => {
    if (inputValue.trim()) {
      setTodos([...todos, { id: Date.now().toString(), text: inputValue }]);
      setInputValue('');
    }
  };

  const handleDeleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  const renderItem = (item) => {
    return (
      <List.Item
        key={item.id}
        title={item.text}
        right={() => (
          <IconButton
            icon="delete"
            onPress={() => handleDeleteTodo(item.id)}
          />
        )}
      />
    );
  };

  return (
    <View style={styles.container}>
      <TextInput
        label="Add a task"
        value={inputValue}
        onChangeText={setInputValue}
        style={styles.input}
      />
      <FAB icon="plus" onPress={handleAddTodo} style={styles.fab} />
      {todos.map(renderItem)}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  input: {
    marginBottom: 20,
  },
  fab: {
    position: 'absolute',
    margin: 20,
    right: 0,
    bottom: 0,
  },
});

export default HomeScreen;

2.6. App.js 파일을 업데이트합니다.​

App.js의 내용을 다음으로 바꿉니다.

App.js
import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import Navigation from './src/Navigation';

export default function App() {
  return (
    <PaperProvider>
      <Navigation />
    </PaperProvider>
  );
}

2.7. 앱을 실행합니다.​

프로젝트 디렉토리에서 yarn start 또는 expo start를 실행하여 개발 서버를 시작합니다.

expo start

Android 또는 iOS 기기에 Expo Go 앱을 설치하세요. 단말기 또는 브라우저에 나타나는 QR 코드를 스캔하거나 Expo Go 앱을 사용하여 앱을 엽니다.

3. 개선 및 보완 하기​

위에서 작성한 코드를 실행 시켜보니 컴파일 오류 및 업데이트 및 삭제가 동작하지 않는 것을 확인할 수 있습니다. 그래서 코드를 수정하고 개선해보겠습니다.

3.1. 컴파일 오류 찾기​

아래와 같이 오류 내용을 ChatGPT에 남기기만 해도 해결 방안을 알려줍니다.

ChatGPT프롬프트
Module not found: Can't resolve 'react-native-safe-area-context'

React Navigation에 필요한 'react-native-safe-area-context' 패키지가 누락된 것 같습니다. 이 문제를 해결하려면 패키지 관리자를 사용하여 패키지를 설치하기만 하면 됩니다.

Yarn을 사용하는 경우 다음을 실행합니다.

yarn add react-native-safe-area-context

npm을 사용하는 경우 다음을 실행합니다.

npm install react-native-safe-area-context

패키지를 설치한 후 개발 서버를 다시 시작하면 오류가 해결됩니다.

그리고 Module not found: Can't resolve 'react-native-screens' 도 발생 했는데 같은 방법으로 해결하면 됩니다. React Native 개발 경험이 있는 분이라면 바로 해결 하셨겠지만 처음 하다보니 따로 찾아볼 필요도 없이 쉽게 해결 되었습니다.

3.2. 빠진 기능 추가​

컴파일 오류를 해결하고 실행 해보니 업데이트 및 삭제 기능이 동작 하지 않고 있는걸 발견 했습니다. 그래서 ChatGPT에게 업데이트와 삭제 기능을 추가 해달라고 했습니다.

ChatGPT프롬프트
update and remove doesn't work

React Native TodoApp 업데이트 및 삭제 기능 개선

아래와 같이 TodoApp이 실행되는 것을 확인할 수 있습니다.

React Native TodoApp 실행 예제

이 단계를 통해 React Native 및 Material UI를 사용하여 간단한 DodoApp을 성공적으로 만들었습니다. React Native 및 Material UI에 익숙해지면 자유롭게 스타일을 수정하고 할 일 앱에 더 많은 기능을 추가하세요.

7. 마치며​

이렇게 간단한 TodoApp 앱을 만들면서 React Native를 사용해보고 배워보았는데 도움이 되셨나요? TodoApp. 간단한 TodoApp 앱 개발로 시작 해서 새롭게 시도해보고 싶은 방향을 찾아 시도해보시면서 개발 경험과 개발 역량을 키워가시길 응원하겠습니다.

참고로 완성된 소스 코드는 GitHub 링크에서 확인 하실수 있습니다.

사용했던 ChatGPT프롬프트는 링크에서 확인 가능 합니다.