[React] [감정일기장] - 기초4

//App.js

const onCreate = useCallback((author,content,emotion)  => {
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date,
      id: dataId.current
    }
    dataId.current += 1;
    //setData([newItem, ...data])
    setData((data)=>[newItem, ...data])
  },
[]);

useCallback은 데이터 상태를 업데이트할때 함수형으로 지시를 해야함

setData([newItem, ...data])

배열을 새로운 상태로 설정
-다이어리를 추가하면 기존 다이어리는 사라지고 새로 추가한 다이어리만 남음

setData((data)=>[newItem, ...data])

배열의 이전 상태를 업데이트

//App.js

const onRemove = useCallback((targetId) => {

	//const newDiaryList = data.filter((it)=> it.id !==targetId);
    //setData(newDiaryList);
    
    setData((data) => data.filter((it) => it.id !== targetId));
},[]);

const onEdit = useCallback((targetId, newContent) => {

	// setData(
        data.map((it)=>it.id === targetId ? {...it, content:newContent} : it)
    )
    
	setData((data) =>
		data.map((it) =>
            it.id === targetId ? { ...it, content: newContent } : it
        )
    );
}, []);