React State

: 컴포넌트의 랜더링 결과물에 영향을 주는 데이터 갖고 있는 객체

State가 변경시 컴포넌트는 리랜더링, 컴포넌트 내에서 관리 이루어짐

todoData라는 데이터 객체와 value라는 데이터를 보유한 state

클릭 이벤트에 의한 함수 정의 부분

filter로 클릭한 요소의 id데이터와 데이터 객체 중 id와 비교해 같은 객체 제외한 나머지 객체들을 newTodoData에 할당

새로 할당된 newTodoData를 todoData에 업데이트

*setState : state 변경

value 넣기

input 태그 속 입력 값 속성(value) 추가한 상태

React state에 value 정의

input 태그 내 입력한 값을 받기 위한 부분

input에 대한 value속성에 대한 값을 state에 정의한 value로 할당

onChange 속성(변화에 대한 인지)에 대한 handleChange 함수 호출

함수 인자로 이벤트(e)를 가져와 e.target.value(입력한 값)을 state에 정의한 value에 할당

input text와 submit을 감싸는 form 태그에서 onSubmit(제출 이벤트)속성으로 handleSubmit 함수 호출

함수 내 입력 전송보낸 데이터를 받을 새로운 데이터 객체 생성(newTodo)

setState로 todoData 객체를 업데이트

전개 연산자(...)로 기존 데이터들과 newTodo를 합쳐서 todoData에 할당

마지막으로 전송 성공시 입력란 글씨를 없애주기 위해 value 초기화