Object {} controll(add, list up modify, delete)

State type : { } object

const [toDos, setToDos] = useState({});

Object 추가하기 | Add new Object

1. Object.assign({} , existing, new )

Object.assign({}, curr, 
{[Date.now()]: { text: textTyped, work: working }}
)

2. ... es6

{
      ...curr,
      [Date.now()]: { text: textTyped, work: working },
    }

오브젝트 리스트 만들기

1. Object.keys() 로 key값 배열을 받아 map으로 리스트를 생성한다.

const keys = Object.keys(toDos)  return [keys]
keys.map(key => <p>{toDos[key].text}</p>)  

equivalent to 

Object.values(toDos).map(key => <p>{toDos[key].text}</p>)

2. Ojbect.values()로 value값 배열을 받아 map으로 리스트 생성한다.

Object.values(toDos).map(todo =>  <p>{toDo.text}</p>) 

취향에 맞게 쓰자.

오브젝트 삭제 delete obj[key]

const Obj = {key1 : {} , key2 : {}}

delete obj["key1"]; 

Obj => {key2 : {}}

react에서는 state값을 바로 수정할 수 없다.
copy해서 manipulate data 후 다시 state에 값을넣어준다.

const [toDos, setToDos] = useState<IToDos>({});

(X) :  
delete toDos[key] // 직접적으로 값을 변경하는 것은 허용 안됨
setToDos(newToDos);

(O) : 
const duplicatedToDos = {...toDos};   
delete newToDos[key];
setToDos(newToDos);

toDos State
type : {}

const [toDos, setToDos] = useState({});

1. add new ToDo

   const newToDos = {...toDos, [key_name] : {text: "work To Do", isWorking : true}}
   setToDos(newToDos);

2. delete ToDo existing

   const newToDos = {...toDos}
   delete newToDos[key_name] ;
   setToDos(newToDos);

3. modify ToDo existing

   const modToDos = {...toDos, [key_name] :{...toDos[key_name], text: "new modified work" };
   setToDos(modToDos);