이제 ToDo를 그리는 함수를 만들어 보자
paintToDo 함수의 인자 값을 newTodo로 주면 이제 handleToDoSubmit() 함수가 paintToDo 함수를 사용하게 되는 것이다.
handleToDoSubmit() 함수에서 변수 newTodo는 input의 value를 비우기 전의 값을 나타내는 string이고, 그런 다음 그 입력값을 paintToDo에 넣어서 호출하는 것이다.
이제 console.log를 사용해보면 paintToDo가 무엇을 그려야 하는지 알게 될 것이다.
새로고침 후 ab를 입력하면 console 창에 I will paint ab 가 출력되는 것을 확인할 수 있다.
다시 정리해 보자면 input에서 value를 얻어서 paintToDo() 라는 새로운 function에 그 값을 보내는 것이다.
background.js에서는 background에서 element를 생성하여 body에 추가하는(ul 태그 안에 li 태그를 사용하여 목록을 생성하는)동작을 했는데, todo.js의 경우에는 li 들을 만들어서 그 li 를 ul 에 추가하면 된다.
나는 li 도 만들고 싶고, li 안에 span 태그도 만들고 싶기 때문에 이렇게 element를 만들어 주는 코드를 작성했다.
이때 span은 li 안에 만들어주는 것이기 때문에 appendChild()를 이용하여 li 가 span 이라는 자식을 가지게 했다.
그리고는 span 의 텍스트가 handleToDoSubmit() 에서 온 newTodo 텍스트가 되도록 코드를 작성했다.
이제 console.log(li) 를 통해 어떻게 li 와 span이 생성되는지 확인해보자
ab를 입력하고 submit 하면 console 창에 li > span > ab 가 생성된 것을 볼 수 있다.
정리해보면 우리는 li 와 span 을 만들었고 그 span 을 li 내부에 집어 넣은 다음 텍스트를 span 내부에 넣어주었는데, 안에 넣은 새로운 텍스트는 사용하자 form에서 우리에게 준 newTodo 값이라는 것이다.
다음으로 해야 할 것은 앞에서 생성한 새로운 li 를 list(toDoList)에 추가하는 것이다.
toDoList 가 li 라는 자식을 갖게 하는 코드 한 줄만 작성하면
입력한 다음 submit한 값들이 목록으로 하나씩 추가되는 것을 확인할 수 있다.
그런데 이때 두 가지 문제점이 있는데, 첫째는 생성한 toDo를 지울 수 없다는 것이고 둘째는 새로고침을 하면 작성한 toDo가 보두 사라진다는 것이다.
이 문제를 해결하는 것은 다음 영상에서 해보자