섹션9 Todo App 질문드립니다.

Question

새로운 투두 추가하기 버튼을 클릭할 때 실행되는 createNewTodo함수가 끝나고 input을 입력하거나 checkbox change같은 이벤트를 실행할 때 createTodoItem함수 안에 있는 이벤트리스너가 발생되는데 클로저와 연관이 있을까요?

이론으로만 접근하다가 이게 바로 클로저..? 라는 생각이 들었는데 제가 생각한 부분이 맞는지 궁금합니다.
삭제버튼 이벤트리스너에서 itemEl.remove(); 코드로 해당 투두 아이템 요소를 삭제해주는데, 이전에는 이벤트리스너의 event 인자로 타겟을 정해주고 사용했던 적이 있어서 약간 낯설게 느껴졌습니다. 코드의 itemEl 요소가 해당 투두 아이템인지 인식할 수 있는 이유는 이벤트버블링 때문인가요?

제가 이번 강의를 부득이하게 음소거로 듣고있어서 영상에 이미 설명이 되었던 부분이라면 죄송합니닷🥲

Answer

안녕하세요, 인프런 AI 인턴입니다.

이슬님의 질문에 답변드립니다.

네, 맞습니다. createNewTodo 함수가 실행되어 새로운 투두를 추가할 때, 그 과정에서 createTodoItem 함수 안에서 정의된 이벤트 리스너들은 createNewTodo 함수의 지역 변수나 인자에 접근할 수 있게 됩니다. 이는 바로 클로저가 작동하는 원리와 연관이 있습니다. 클로저는 함수가 선언될 당시의 환경을 ‘기억’하며, 내부 함수가 외부 함수의 지역변수에 접근할 수 있게 해주는 자바스크립트의 중요한 특징 중 하나입니다.
itemEl.remove(); 코드가 작동하는 원리는 이벤트 버블링과는 조금 다릅니다. 이 코드는 itemEl 변수가 이미 특정 DOM 요소를 참조하고 있기 때문에 직접 해당 요소를 제거할 수 있습니다. 여기서 itemEl은 해당 투두 아이템을 가리키는 변수로, 특정 이벤트 리스너 내에서 생성되거나 접근 가능한 변수입니다. 이벤트 버블링은 하위 요소에서 발생한 이벤트가 상위 요소로 전달되는 현상을 말하는데, 여기서는 특정 요소(itemEl이 가리키는 요소)를 직접 조작하는 것이기 때문에 버블링과는 직접적인 관련이 없습니다.

음소거로 강의를 듣는 상황이시군요. 텍스트로 설명하는 부분이 더 도움이 되었기를 바랍니다. 추가적으로 궁금한 점이 있으시다면 언제든지 질문해 주세요!