이벤트위임, 버블링/캡처링, React17에서의 변경점
DOM DOM(Document Object Model)은 HTML, XML등의 문서를 트리 구조로 표현한 것입니다. 이 트리 구조는 요소(element), 속성(attribute), 텍스트(text) 등의 노드(node)로 구성되어 있습니다. DOM에서의 이벤트 처리는 이벤트 위임, 이벤트 버블링, 이벤트 캡처링 등의 개념을 이용해 구현됩니다. 표준 DOM이벤트에서 정의한 3가지 이벤트 흐름은 다음과 같습니다. 첫번째, 캡처링 단계는 이벤트가 하위 요소로 전파되는 단계 이며, 두번째 타깃 단계는 이벤트가 실제 타깃 요소에 전달되는 단계이고, 세번째는 버블링 단계로 이벤트가 상위 요소로 전파되는 단계 입니다. 이벤트 캡처링부터 알아보겠습니다. 이벤트 캡처링 이벤트 캡처링은 최상위 요소에서 하위 요소로 이벤..
2023. 7. 20.
[Javascript] 콜스택(Call Stack), 메모리힙(Memory Heap), 가비지컬렉션, 메모리릭 그림으로 이해하기
Call Stack과 Heap 시작하기에 앞서 하나의 스레드 당 하나의 스택메모리를 사용하는데, 자바스크립트는 싱글스레드 언어이기 때문에 콜스택이라는 스택메모리 하나만 사용합니다. const a = 'Hello World!'; const b = [1, 2, 3]; const c = { id:'yoy', password:1234 }; const d = function(){ console.log() }; 이런 코드가 있다고 했을때, 자바스크립트 엔진에서 Call Stack 영역과 Heap 영역에서 어떻게 동작하는지 알아보도록 하겠습니다. 우선 각 변수 a, b, c, d는 call stack의 실행컨텍스트 렉시컬환경이라는 곳에 { name : value } 형태로 저장됩니다. 비록 초기화 단계에서는 { 변수..
2022. 3. 16.
