React Native 공부중

 

React Native ToDo 앱 만들기

 

AsyncStorage 사용

 

  const saveTodos = async (toSave) => {
    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
  };
  const getToDos = async () => {
    const s = await AsyncStorage.getItem(STORAGE_KEY);
    setToDos(JSON.parse(s));
  };

 

AsyncStorage 를 사용해서 JSON.stringify( )를 사용해서Todo를 저장하고 저장된 Todo를  JSON.parse( )를 사용해서 앱이 다시 켜졌을 때 불러올수 있는 방법을 배웠는데

저번 프로젝트에서 사용했던 로컬스토리에 저장하는 경험이 있어서 이해하기 쉬었다.

 

UI 부분

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      <View style={styles.header}>
        <TouchableOpacity onPress={work}>
          <Text
            style={{ ...styles.btnText, color: working ? "white" : theme.grey }}
          >
            Work
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={travel}>
          <Text
            style={{
              ...styles.btnText,
              color: !working ? "white" : theme.grey,
            }}
          >
            Travel
          </Text>
        </TouchableOpacity>
      </View>
      <TextInput
        onSubmitEditing={addToDo}
        onChangeText={onChangeText}
        value={text}
        placeholder={working ? "해야 할 일" : "여행지"}
        style={styles.input}
      />
      <ScrollView>
        {Object.keys(toDos).map((key) =>
          toDos[key].working === working ? (
            <View style={styles.toDo} key={key}>
              <Text style={styles.toDoText}>{toDos[key].text}</Text>
              <TouchableOpacity onPress={() => deleteToDo(key)}>
                <Entypo name="trash" size={20} color="white" />
              </TouchableOpacity>
            </View>
          ) : null
        )}
      </ScrollView>
    </View>
  );
}

 

내배캠에서 알려준 Native 투두 만들기전 다른강의를 들으며 따라 만들어봤다.

기본적인 뼈대를 작성을 하면서 TochableOpacity 라는 컴포넌트를 이용해서 터치를 하면 호버기능과 비슷한 기능을 하는 컴포넌트를 이용해서 터치하는 부분을 만들어주고 Text를 이용해서 투두와 여행지를 입력하는 부분을 만들어놨다.

 

기능 구현

AsyncStorage를 이용해서 저장한 todos를 가져와 보여주고 Text에 작성한 내용을 Work와 Travel 로 나누어 저장해두는 방식을 사용했고 delete 기능을 구현했다.

import { StatusBar } from "expo-status-bar";
import { useEffect, useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
  ScrollView,
  Alert,
} from "react-native";
import { theme } from "./colors";
import { Entypo, AntDesign } from "@expo/vector-icons";
import AsyncStorage from "@react-native-async-storage/async-storage";

const STORAGE_KEY = "@toDos";

export default function App() {
  const [working, setWorking] = useState(true);
  const [text, setText] = useState("");
  const [toDos, setToDos] = useState({});

  useEffect(() => {
    getToDos();
  }, []);

  const travel = () => setWorking(false);
  const work = () => setWorking(true);

  const onChangeText = (payload) => setText(payload);

  const saveTodos = async (toSave) => {
    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
  };

  const getToDos = async () => {
    const s = await AsyncStorage.getItem(STORAGE_KEY);
    setToDos(JSON.parse(s));
  };

  const addToDo = async () => {
    if (text === "") {
      return;
    }
    const newToDos = {
      ...toDos,
      [Date.now()]: { text, working },
    };
    setToDos(newToDos);
    await saveTodos(newToDos);
    setText("");
  };

  const deleteToDo = (key) => {
    Alert.alert("목록 삭제", "삭제 하시겠습니까?", [
      { text: "취소" },
      {
        text: "완료",
        onPress: () => {
          const newToDos = { ...toDos };
          delete newToDos[key];
          setToDos(newToDos);
          saveTodos(newToDos);
        },
      },
    ]);
    return;
  };

todos를 저장할때 

const saveTodos = async (toSave) => {
    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(toSave));
  };

 JSON.stringify( ) 를 사용해서 로컬스토리에 저장하고 불러오는 방식을 사용했다.

저번 프로젝트에 사용했던 코드라서 그런지 별다른 오류나 어려움없이 기능구현에 성공했다.

 

delete를 구현할때 alert창을 띄워서 삭제할지 아니면 삭제하지않을지 선택하는 창을 띄우는 걸 구현하다가

사용법을 잘못 이해해서 인자로 3개를 작성해야하는데 2개만 작성해서 오류가 나타났었는데

다시 3개로 봐꾸었더니 정상적으로 작동했다.

항상 공식문서를 제대로 봐야한다는 걸 다시금 깨닫게 되었다.