DOM 조작과 이벤트 처리 기초
JavaScript는 DOM을 선택하고 이벤트에 반응해 화면 상태를 바꾼다. 핵심 순서는 찾기, 듣기, 변경, 반영이다.
| 순서 | 하는 일 | 대표 API | 주의점 |
|---|---|---|---|
| Find | 바꿀 요소를 선택 | querySelector | 선택자가 null일 수 있음 |
| Listen | 사용자 행동을 기다림 | addEventListener | 이벤트 중복 등록 주의 |
| Read | 현재 값이나 상태를 읽음 | value, dataset, classList | DOM을 데이터 저장소로 남용 |
| Update data | 상태나 계산 결과를 갱신 | array/object state | 원본 mutation 추적 어려움 |
| Render | 텍스트, 클래스, 속성으로 반영 | textContent, classList, setAttribute | innerHTML 남용과 보안 위험 |
DOM 조작은 무작정 화면을 바꾸는 일이 아니라 이벤트로 시작된 상태 변화를 화면에 반영하는 흐름이다.