섹션9 Todo App 질문드립니다.
194
投稿した質問数 2
새로운 투두 추가하기 버튼을 클릭할 때 실행되는 createNewTodo함수가 끝나고 input을 입력하거나 checkbox change같은 이벤트를 실행할 때 createTodoItem함수 안에 있는 이벤트리스너가 발생되는데 클로저와 연관이 있을까요?
이론으로만 접근하다가 이게 바로 클로저..? 라는 생각이 들었는데 제가 생각한 부분이 맞는지 궁금합니다.삭제버튼 이벤트리스너에서
itemEl.remove();코드로 해당 투두 아이템 요소를 삭제해주는데, 이전에는 이벤트리스너의 event 인자로 타겟을 정해주고 사용했던 적이 있어서 약간 낯설게 느껴졌습니다. 코드의itemEl요소가 해당 투두 아이템인지 인식할 수 있는 이유는 이벤트버블링 때문인가요?
제가 이번 강의를 부득이하게 음소거로 듣고있어서 영상에 이미 설명이 되었던 부분이라면 죄송합니닷🥲
回答 1
0
안녕하세요, 인프런 AI 인턴입니다.
이슬님의 질문에 답변드립니다.
네, 맞습니다. createNewTodo 함수가 실행되어 새로운 투두를 추가할 때, 그 과정에서 createTodoItem 함수 안에서 정의된 이벤트 리스너들은 createNewTodo 함수의 지역 변수나 인자에 접근할 수 있게 됩니다. 이는 바로 클로저가 작동하는 원리와 연관이 있습니다. 클로저는 함수가 선언될 당시의 환경을 ‘기억’하며, 내부 함수가 외부 함수의 지역변수에 접근할 수 있게 해주는 자바스크립트의 중요한 특징 중 하나입니다.
itemEl.remove();코드가 작동하는 원리는 이벤트 버블링과는 조금 다릅니다. 이 코드는itemEl변수가 이미 특정 DOM 요소를 참조하고 있기 때문에 직접 해당 요소를 제거할 수 있습니다. 여기서itemEl은 해당 투두 아이템을 가리키는 변수로, 특정 이벤트 리스너 내에서 생성되거나 접근 가능한 변수입니다. 이벤트 버블링은 하위 요소에서 발생한 이벤트가 상위 요소로 전달되는 현상을 말하는데, 여기서는 특정 요소(itemEl이 가리키는 요소)를 직접 조작하는 것이기 때문에 버블링과는 직접적인 관련이 없습니다.
음소거로 강의를 듣는 상황이시군요. 텍스트로 설명하는 부분이 더 도움이 되었기를 바랍니다. 추가적으로 궁금한 점이 있으시다면 언제든지 질문해 주세요!
3강 질문
0
18
1
74. 데이터 캐시 - 1 (이론) 강의 영상 누락
0
27
1
2강 nodejs 3단계 설명 질문
0
33
1
imagesLoaded에 관한 질문
0
19
2
useEffect와 lifecycle문의
0
26
2
프론트엔드 학습 수준 문의
0
37
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
48
2
최근 코테, 과제 테스트 트렌드
0
68
2
lucide react 아이콘 설치
0
46
2
17강 zustand store 서버에서 생성
1
36
1
주석처리한 buttons가 작동하는 이유
0
94
1
document 객체가 콘솔에 화면처럼 뜨질않는데 무슨이유일까요?
0
140
1
vscode 에서 LiveSever를 통해 연 페이지에 왜 코드가 바로 연동이 되어 출력이 안될까요??
0
169
1
Start 버튼을 연속으로 두 번 누르면 Stop버튼이랑 Reset 버튼이 작동하지 않습니다.
0
116
1
Shallow Freeze 관련 질문드립니다!
0
198
1
var 로 선언해서 window 객체의 프로퍼티로 만들기
0
137
1
랜덤 난수의 정수화
0
178
1
강의 자료 소스 복사
0
309
1
Todo App(1) 스타일 파일 코드
0
448
2
변수를 먼저 let val; 선언하는 이유가 있나요?
0
231
1
[섹션2 Document Object 이용해보기] lists라는 변수를 forEach를 사용하려면...
0
186
1
해당 강의의 index.html 소스코드 파일을 받고 싶습니다!
0
243
1
[Event Delegation] 요소의 id를 변수 선언 없이 바로 사용할 수 있는 이유?
1
394
1
얕은 복사가 주소만 복사하는 것 아닌가요?
0
495
1