리액트 Todo리스트 직접 만들어보기(2)

현재 화면

Delete 기능

삭제 순서

1.값을 읽어온다.
2.삭제 이벤트를 만들어준다
3.삭제 이벤트가 실행된다.

1. 값을 읽어온다.

Content가 보여지는 영역(임시 투두리스트 텍스트가 있는 부분)에서 content내용을 클릭할 때 현재 값을 가져와야 한다.

먼저 변수를 만들어 주었고 
const [updateNumber, setUpdateNumber] = useState('');
const [updateArea, setUpdateArea] = useState("");

//Content영역에서 내용을 클릭할 때 이벤트 타겟으로 현재값을 가져와 setUpdateNumber로 값을 전달해주었습니다.

onClick={(e) => {
	// 현재 content 크기만큼 반복실행
	for(let i=0; i < content.length; i++) 
    {
    	// 그중 만약에 content[i].id와 e.target.id(현재 클릭한 id의 값)이 같다면 
        if(content[i].id === Number(e.target.id))
        {
     		  setUpdateArea(content[i].todo);
              setUpdateNumber(content[i].id);
              break;
        }
    }
}}

2. 삭제 이벤트를 만들어준다.

onDelete={(_delete) => {
		const copyContents = [...content]; // 기존 content를 복사
          const newContents = []; // 새로운 컨텐츠를 넣을 변수 만들기

          for(let i=0; i<copyContents.length; i++) // 기존 content크기만큼 반복 후
          {
            if(copyContents[i].id !== Number(updateNumber)) // id가 같지 않은것만 
            {
              // 추가해주기 
              newContents.push(copyContents[i]);
            }
          }
          // 저장된 값을 setContent를 통하여 저장
          setContent(newContents);
}}

3.삭제 이벤트가 실행된다.

삭제 전 이미지

삭제 후 이미지