프로젝트/[react]todo_app
-
[todo_app_12] 할일 update, 실제 디스크에 저장프로젝트/[react]todo_app 2018. 6. 1. 11:51
업데이트 함수 _updateToDo = (id, text) => { this.setState(prevState => { const newState = { ...prevState, toDos: { ...prevState.toDos, [id]: { ...prevState.toDos[id], text: text } } }; this._saveToDos(newState.toDos); return { ...newState }; }); }; 저장하기_saveToDos = newToDos => { const saveToDos = AsyncStorage.setItem("toDos", JSON.stringify(newToDos)); }; 저장한 정보를 로드하기 _loadToDos = async () => { try { ..
-
[todo_app_11] 완성, 미완성 할일프로젝트/[react]todo_app 2018. 6. 1. 11:51
완성된 할일, 미완성된 할일을 구분하자 _uncompleteToDo = id => { this.setState(prevState => { const newState = { ...prevState, toDos: { ...prevState.toDos, [id]: { ...prevState.toDos[id], isCompleted: false } } }; this._saveToDos(newState.toDos); return { ...newState }; }); }; _completeToDo = id => { this.setState(prevState => { const newState = { ...prevState, toDos: { ...prevState.toDos, [id]: { ...prevState.t..
-
[todo_app_10] 디스크에서 할일목록 관리하기 3프로젝트/[react]todo_app 2018. 5. 26. 13:50
json으로 저장된 todo목록을 매핑해준다. {Object.values(toDos) .reverse() .map(toDo => ( ))} propType을 체크해주자 static propTypes = { text: PropTypes.string.isRequired, isCompleted: PropTypes.bool.isRequired, deleteToDo: PropTypes.func.isRequired, id: PropTypes.string.isRequired, uncompleteToDo: PropTypes.func.isRequired, completeToDo: PropTypes.func.isRequired, updateToDo: PropTypes.func.isRequired }; prop을 state..
-
[todo_app_9] 디스크에서 할일목록 관리하기 2프로젝트/[react]todo_app 2018. 5. 26. 13:44
저장하는 함수를 생성하기 todo를 state에서 가져오고, todo가 비어있지 않다면 무언가를 해야함. _addToDo = () => { const { newToDo } = this.state; if (newToDo !== "") { this.setState({newToDo: ""}); }); } }; 뭔가를 쓰고, 리턴하면 인풋창이 비워지게된다. id로 입력되고, 그 안에 텍스트, isCompleted, date등이 저장되게 모델링하고싶음. _addToDo = () => { const { newToDo } = this.state; if (newToDo !== "") { this.setState(prevState => { const ID = uuidv1(); const newToDoObject = { ..
-
[todo_app_8] 디스크에서 할일목록 관리하기 1프로젝트/[react]todo_app 2018. 5. 26. 13:44
디스크에서 todo리스트를 관리해야한다. import { AppLoading } from "expo"; state = { newToDo: "", loadedToDos: false, toDos: {} }; if (!loadedToDos) { return ; } todo가 로딩이 되지 않으면 로딩화면이 뜬다. componentDidMount = () => { this._loadToDos(); }; 로딩이 끝나면, loadedToDos를 True로 바꿔줄 _loadToDos()함수가 필요하다.
-
[todo_app_7] todo목록 수정프로젝트/[react]todo_app 2018. 5. 20. 21:37
app.js에서 todo목록을 관리, 컨트롤 하고 있다todo.js에서 수정할 때, app.js에서 props를 받아오고 싶음 => 그래야수정할때 자연스럽게 연출됨 수정할 때 텍스트인풋이 떠야하고, 그 안에 value가 있어야함. todo.js const { text } = this.props; { isEditing ? : ( { text } )} app.js ) 편집을 했을 때, 해당 텍스트를 복사해서 state에 보내기todo.jsstate = { toDoValue: ' ' }; 편집중일때는 textinput, 아닐때는 text{ isEditing ? : ( { text } )} 스타일 지정 input: { marginVertical: 15, width: width/2, paddingBottom: 5..
-
[todo_app_6] isEditing?프로젝트/[react]todo_app 2018. 5. 15. 13:42
수정, 삭제 스타일 수정중인지 아닌지 여부를 판단해서 스타일을 표시할거라 isEditing이 필요함 render(){ const { isEditing } = this.state; 수정, 삭제를 할 수 있는 연필, 엑스표 모양 이모지를 넣자column안에서 관리할거임 {/* column*/} todo ) {isEditing ? {/*수정할 때 모드*/} ✅ : {/*수정하지 않을 때 때 모드*/} ✏️ ❌ } 스타일을 준다const styles = StyleSheet.create({ container: { width: width - 50, borderBottomColor: "#bbb", borderBottomWidth: StyleSheet.hairlineWidth, alignItems: "center", ..
-
[todo_app_5] ui 마무리프로젝트/[react]todo_app 2018. 5. 15. 13:42
isEditing? ToDo앱은 두 개의 states가 있다수정할 때수정하지 않을 때 두 개의 state를 만들고 그 사이를 왔다갔다 해야함 state = { isEditing: false }기본값은 false (수정하기를 누르면 true가 되도록) 다시 ui작업... 할일 목록을 담을 컨테이너 스타일터치 가능한 동그라미 import React, {Component} from 'react';import { View, Text, TouchableOpacity, StyleSheet, Dimensions } from 'react-native'; const { width, height } = Dimensions.get("window"); export default class ToDo extends Compone..