TO DO LIST

간단한 TO DO LIST를 만들어 보려고한다.

전에 vanilaJS로 만들어 본 적이 있었는데 일일이 eventListener를 넣어주거나 화면을 새로고침해주거나 하는식으로 하였는데 이젠 React의 setState()기능으로 좀 더 수월하게 진행할 수 있을 것 같다.

 

일단 전체적인 코드는 이러하다.

화면은 아래와 같다

 

먼저 ustState를 사용하여 List와 todo state를 만들어주었다. string인 todo를 array인 list안에 집어 넣고 그 list를 출력하려고 하기 때문이다. onChange는 input에 타이핑이 될 때마다 setTodo를하여 todo state를 업데이트 하는 것이다.

타이핑이 끝나면 이제 엔터를 치던 버튼을 누르면 전송을 해야하는데 이때 onSubmit을 사용한다. form이 전송이 되면 자동으로 새로고침이 이루어지는데 그걸 막는것이 preventDefault()함수이다. 그리고 onClick함수를 실행시켜주었다.

setList에 current(현재 list값)에 새로운 배열을 만들어 todo와 current를 집어넣어주면 새로운 list가 탄생한다. 그 뒤에 todo를 공백으로 만들어 주었다. 

여기서는 ul안에 map함수를 사용하여 array에서 새로운 배열을 return하여 li를 만들어 주었다.

map함수는 첫번째인자에 0번째 array element부터 마지막 element까지 순서대로 하나하나 돌면서 값이 들어간다.

그리고 return값으로 새로운 배열이 리턴이 되는데 우리는 JSX li를 만들어 리턴해주었다. ul li안에서 key값을 unique하게 적어주어야하는데 이건 map함수의 두 번째인자에 자동으로 index가 들어있기때문에 이 값을 넣어주었다.