[todo_app_10] 디스크에서 할일목록 관리하기 3

json으로 저장된 todo목록을 매핑해준다.

<ScrollView contentContainerStyle={styles.toDos}>

{Object.values(toDos)

.reverse()

.map(toDo => (

<ToDo

key={toDo.id}

deleteToDo={this._deleteToDo}

uncompleteToDo={this._uncompleteToDo}

completeToDo={this._completeToDo}

updateToDo={this._updateToDo}

{...toDo}

/>

))}

</ScrollView>

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에 복사하는 대신 constructor을 사용

constructor(props){

super(props);

this.state = {

isEditing: false,

toDoValue: props.text

};

};

삭제하는 함수까지 생성

_deleteToDo = id => {

this.setState(prevState => {

const toDos = prevState.toDos;

delete toDos[id];

const newState = {

...prevState,

...toDos

};

this._saveToDos(newState.toDos);

return { ...newState };

});

};