프로젝트
-
[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..
-
[todo_app_4] 스크롤이 가능한 리스트프로젝트/[react]todo_app 2018. 5. 15. 13:41
ToDo.js 리스트를 만들어서, 스크롤 할 수 있게 코드를 작성하려고 한다.ToDo.js 파일로 빼서 작업import React, {Component} from 'react';import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'; export default class ToDo extends Component{ //stateful component, 수정되야하니까 render(){ return ( ToDo ) }} const styles = StyleSheet.create({ }) App.js 에 ToDo 컴포넌트 import 하기 import ToDo from './ToDo'; 스크롤이 가능하게 되었다. 가운데 정렬 ! toDo..