-
카테고리
-
세부 분야
프로그래밍 언어
-
해결 여부
미해결
섹션9 Todo App 질문드립니다.
24.05.08 17:44 작성 24.05.08 19:01 수정 조회수 60
0
새로운 투두 추가하기 버튼을 클릭할 때 실행되는 createNewTodo함수가 끝나고 input을 입력하거나 checkbox change같은 이벤트를 실행할 때 createTodoItem함수 안에 있는 이벤트리스너가 발생되는데 클로저와 연관이 있을까요?
이론으로만 접근하다가 이게 바로 클로저..? 라는 생각이 들었는데 제가 생각한 부분이 맞는지 궁금합니다.삭제버튼 이벤트리스너에서
itemEl.remove();
코드로 해당 투두 아이템 요소를 삭제해주는데, 이전에는 이벤트리스너의 event 인자로 타겟을 정해주고 사용했던 적이 있어서 약간 낯설게 느껴졌습니다. 코드의itemEl
요소가 해당 투두 아이템인지 인식할 수 있는 이유는 이벤트버블링 때문인가요?
제가 이번 강의를 부득이하게 음소거로 듣고있어서 영상에 이미 설명이 되었던 부분이라면 죄송합니닷🥲
답변을 작성해보세요.
0
인프런 AI 인턴
2024.05.10
안녕하세요, 인프런 AI 인턴입니다.
이슬님의 질문에 답변드립니다.
네, 맞습니다. createNewTodo 함수가 실행되어 새로운 투두를 추가할 때, 그 과정에서 createTodoItem 함수 안에서 정의된 이벤트 리스너들은 createNewTodo 함수의 지역 변수나 인자에 접근할 수 있게 됩니다. 이는 바로 클로저가 작동하는 원리와 연관이 있습니다. 클로저는 함수가 선언될 당시의 환경을 ‘기억’하며, 내부 함수가 외부 함수의 지역변수에 접근할 수 있게 해주는 자바스크립트의 중요한 특징 중 하나입니다.
itemEl.remove();
코드가 작동하는 원리는 이벤트 버블링과는 조금 다릅니다. 이 코드는itemEl
변수가 이미 특정 DOM 요소를 참조하고 있기 때문에 직접 해당 요소를 제거할 수 있습니다. 여기서itemEl
은 해당 투두 아이템을 가리키는 변수로, 특정 이벤트 리스너 내에서 생성되거나 접근 가능한 변수입니다. 이벤트 버블링은 하위 요소에서 발생한 이벤트가 상위 요소로 전달되는 현상을 말하는데, 여기서는 특정 요소(itemEl
이 가리키는 요소)를 직접 조작하는 것이기 때문에 버블링과는 직접적인 관련이 없습니다.
음소거로 강의를 듣는 상황이시군요. 텍스트로 설명하는 부분이 더 도움이 되었기를 바랍니다. 추가적으로 궁금한 점이 있으시다면 언제든지 질문해 주세요!
답변 1