React App으로 간단한 To-Do 리스트 만들기

 

 

 

만들기전에 알아야할 React 개념:

 

 

React.useState():  ->  이 문법은 하나의 오브젝트와, 그 오브젝트를 수정하는 메소드를 함께제공한다.

 

EX)  const [zip , setZip] = React.useState(""); 

 

이걸 이용해서,  zip이란 문자를 setZip으로 새로 바꿀수있다.  물론 문자말고 다른것도 가능하다.

 

 

 

 

Fuction App()을 생성하자.

 

toDo로 할것을 저장할 Strng과 

할것들을 저장할 toDos 배열을   useState로 오브젝트와, 수정자를 만들어준다.

 

이벤트로는  onChange, onSubmit을 준비한다.

 

 

App의 리턴으론  html코드를 작성한다. 

 

My to Dos 의 옆에  리스트의 길이를 반영하고,

 

form을통해   할것을 작성해서  리스트의 추가한다.

 

추가한 리스트는  매핑하여, 리스트로 출력한다.