[JS] Object에 객체 추가 - Object Assign, ES6 spread

React.js 에서는 object를 수정하면 안된다. 수정하고 싶을 땐 기존 object에 요소를 추가/삭제한 새로운 object를 반환해야 한다.

 

객체 추가할 때 두 가지 방법으로 코드를 작성할 수 있다. 

 

key: 작성 일시, value: todo list의 할 일 인 Object를 선언하고, 요소를 추가하는 방법을 공부해보려 한다.

배열로 하는 것에 익숙한데, Object로도 연습하고 정리해보고자 한다.

1. Object Assign

const newToDos = Object.assign({}, toDos, {[Date.now()]: { text, done: false });

 

Object.assign() - JavaScript | MDN

2. ES6의 spread 문법 이용

const newToDos = {
    ...toDos,
    [Date.now()]: { text, done: false },
  };

---

Object.keys()를 이용한 렌더링

Object 여러 개를 나열하여 렌더링하고 싶을 땐 어떻게 해야할까

array일 경우에는 map을 사용하였었다.

 

Objects.keys() 를 이용하면 keys의 집합 array를 얻을 수 있다. keys array를 생성한 뒤 map을 이용하자

 

Object.keys(x).map(key => x[key])

 

React Native 응용 코드

{Object.keys(toDos).map(key => <View key={key}>
  <Text>{toDos[key].text}</Text>
</View>)}