ReactJs#5 -todolist

지금까지 배웠던 React로 아주아주 간단한 todolist를 만들어 보자. 

우선 useState로 input 값인 todo를 설정해주고 input 안의 요소들을 설정해 준 뒤 onchange함수를 설정해주자.

그러면 input값에 따라서 todo가 변화하는 것 까지는 설정을 해줬다. 이제 이 친구들을 form에 제출하면, 배열에 따로 저장 한 뒤에 하나의 component로 출력해보자. 

input요소 앞에 form을 넣어주고 onSubmit으로 Evnetlistener도 설정해준다. 

그리고 useState를 배열로 정의해 줘서 todo들이 담길 배열을 설정해준다. 

onsubmit함수에 자동 새로고침을 막기 위해서 event.preventDefault() 값을 설정해주고, todo, 입력되는 값이 공백이면 Return을 해주고, 그렇지 않다면 setTodos를 통해 배열에 추가해 준다. js에서 배열에 값을 추가하려면 그냥 Push를 하면 되지만, react에서는 state를 직접 건드리면 안 되기 때문에, 현재 배열을 currentarray로 가져온 다음에 =>라는 함수를 통해 배열을 설정해준다. 여기서 currentarray 앞에 붙은... 은... 뒤에 있는 배열의 요소를 다 가져온다는 뜻으로, 만약 array=[1,2,3,4]라는 배열이 있다면, [5,... array]를 해주면 [5,1,2,3,4]와 같은 뜻이 된다. 그래서 [todo,... currentarray]를 해주면, Todos가 새롭게 정의되는 것과 마찬가지다. 이렇게 Todos의 세팅을 마치면

map을 활용하여 todos안에 있는 index를 전부 돌아줘야 한다. 사실 todos.map((item)=><li>{item} </li>는 이전에 배웠던 것을 통해 적어 줄 수 있는데 index를 추가해서 적어준 까닭은 

위와 같이 console에서 발생하는 error 때문이다. error를 보면, 각각의 요소들은 key를 가지면서 차별돼야 한다고 말해주고 있다. 그래서, map에서 인자로 받아줄 수 있는 index를 받아주고, li 요소 옆에 key를 추가해 요소들을 구분해 주었다. 

그러면 이렇게 간단한 TodoList를 만들어 줄 수 있다.