input과 button 요소를 form으로 감싼다.
button을 누르면 form의 submit event의 발생을 막도록 하고 싶다. form 안의 button을 클릭하면 submit event가 발생하면서 input value의 값이 서버로 submit되면서 새로고침된다. 이를 막기 위해 넣는다. 우리는 서버로 이 값을 보내는 게 아니라 다른 작업을 하고 싶을 뿐이다.
input에 값을 입력하면 그 값으로 state toDo가 바뀌고, 그 바뀐 값으로 input의 value가 수정이 된다. button을 눌러 form 요소의 submit 이벤트를 발생시키면 서버에 value를 보내는 대신 다른 작업을 수행할 것이다.
여러 개의 toDo를 받을 수 있는 array를 만든다. 이 state array에는 우리가 입력한 toDo들이 저장된다.
state는 항상 직접적으로 수정하지 않아야 한다. 무조건 modifier 함수를 이용해 수정한다. toDos.push 같은 것은 하지 않는다.
이 Array의 각각의 원소들을 가지고 component를 만들고 싶다. 그래야 렌더링이 될 거니까.
map 메서드를 이용해서 array 안의 각각의 요소들에 함수 func를 적용한다.
a = [1,2,3,4,5,6]
(6) [1, 2, 3, 4, 5, 6]
a.map((items) => items * 10)
(6) [10, 20, 30, 40, 50, 60]
같은 컴포넌트의 list를 렌더링할때는 key라는 prop을 넣어주어야 한다.