리스트요소 삭제 및 수정하기

리스트 요소를 삭제하기

/*App.tsx*/
//체인스코프를 활용한 것이다.
 export type ondelete = (targetId:number)=>void;
 const [data,setData] = useState<Info[]>([]);
 const onDelete:ondelete = (targetId)=>{
    const newDiaryList = data.filter((it)=>it.id !== targetId);// 필터를 사용하여 targetId가 아닌 요소들의 새로운 배열을 생성 한다.
    setData(newDiaryList);
  }/

리스트 요소 수정하기

export type onedit = (targetId:number,newContent:string)=>void
const onEdit:onedit = (targetId,newContent)=>{
    setData(data.map((it)=>it.id === targetId?{...it,content:newContent}:it));
  }//데이터자료를 순회를 하여 목표id와 같으면 newContent로 값을 변경한다. 아니면 그대로 둔다.

일단 props를 전달할 때 부모노드를 순회하면서 한다. 나중에는 hook을 사용하면 된다.