[React-Native] Todo 앱 만들기(3/6)_Object.assign(), ES6

Todos

입력한 데이터 저장하기

...
const onChangeText = (payload) => setText(payload);
/// 추가
const [toDos, setToDos] = useState({});
const addToDo = () => {
    if (text === "") {
      return;
    }
    const newToDos = Object.assign({}, toDos, {
      [Date.now()]: { text, work: working },
    });
    setToDos(newToDos);
    setText("");
};

...

<TextInput
    onSubmitEditing={addToDo}	// 추가
    onChangeText={onChangeText}
    returnKeyType="done"	// 추가
    value={text}
    placeholder={working ? "Add a To Do" : "where do you want to go?"}
    style={styles.input}
/>

- addToDo 메서드 추가, TextInput에서 submit과 returnKeyType을 "done" 으로 바꿈

 

 

 

Object.assign

const newToDos = Object.assign({}, toDos, {
	[Date.now()]: { text, work: working },
});
setToDos(newToDos);

- ToDos를 Object형식으로 저장하고 있는데 state는 직접적으로 변경이 불가능

-  때문에 Object.assign 메서드를 사용하여 기존의 Object와 새로 추가될 Object를 합쳐서 새로운 Object를 반환한다.

 

Object.assign([1], [2], [3], ...)

[1] : target Object - 새롭게 생성하여 반환하는 Object  >> {} (빈 Object 생성)

[2] : Source1 - [1]에 추가할 첫번째 Object >> toDos (기존에 toDos에 있는 Object 추가)

[3] : Source2 - [1]에 추가할 두번째 Object  >> [key] : [value] = [Date.now()] : {text, work: working} (새로 추가할 Object)

... 뒤에 더 추가할 데이터 있으면 쭉 적어나가면 된다.

 

 

ES6

const newToDos = {
	...toDos,
    [Date.now()]: { text, work: working },
}

- Object.assign 대신에 이렇게 변경도 가능함

---

전체 소스코드

import { StatusBar } from "expo-status-bar";
import { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput,
} from "react-native";
import { theme } from "./colors";

export default function App() {
  const [working, setWorking] = useState(true);
  const [text, setText] = useState("");
  const [toDos, setToDos] = useState({});
  const travel = () => setWorking(false);
  const work = () => setWorking(true);
  const onChangeText = (payload) => setText(payload);
  const addToDo = () => {
    if (text === "") {
      return;
    }
    // const newToDos = Object.assign({}, toDos, {
    //   [Date.now()]: { text, work: working },
    // });
    const newToDos = {
	...toDos,
    [Date.now()]: { text, work: working },
	}
    setToDos(newToDos);
    setText("");
  };

  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}
        returnKeyType="done"
        value={text}
        placeholder={working ? "Add a To Do" : "where do you want to go?"}
        style={styles.input}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: theme.bg,
    paddingHorizontal: 20,
  },
  header: {
    justifyContent: "space-between",
    flexDirection: "row",
    marginTop: 100,
  },
  btnText: {
    fontSize: 38,
    fontWeight: "600",
    color: "white",
  },
  input: {
    backgroundColor: "white",
    paddingVertical: 15,
    paddingHorizontal: 20,
    borderRadius: 30,
    marginTop: 20,
    fontSize: 18,
  },
});