addEventlistener

📌 오늘 집중한 작업

addEventListener를 활용한 동적 상품 필터링 기능 구현

오늘은 사용자가 드롭다운에서 상품 개수와 정렬 옵션을 변경할 때마다 실시간으로 상품 목록이 업데이트되도록 하는 인터랙티브 기능을 완성했습니다.

🔧 구현한 기능

1. limit 드롭다운 이벤트 리스너

const limitSelect = document.querySelector("#limit-select");

if (limitSelect) {
  limitSelect.addEventListener("change", (event) => {
    const selectedLimit = event.target.value;
    updateCardProducts(selectedLimit, sortSelect?.value);
  });
}

• 사용자가 "10개", "20개", "50개", "100개" 중 선택 시 즉시 반영- -
• event.target.value 로 선택된 값 획득
• 현재 정렬 옵션과 함께 updateCardProducts() 호출

2. sort 드롭다운 이벤트 리스너

const sortSelect = document.querySelector("#sort-select");

if (sortSelect) {
  sortSelect.addEventListener("change", (event) => {
    const selectedSort = event.target.value;
    updateCardProducts(limitSelect?.value, selectedSort);
  });
}

• "가격 낮은순", "가격 높은순", "이름순", "이름 역순" 정렬 옵션
• 현재 limit 설정과 함께 상품 목록 재조회
• ?. 옵셔널 체이닝으로 안전한 접근

3. DOM 요소 안전 접근

if (limitSelect) {
  // 이벤트 리스너 등록
}

• document.querySelector()결과가 null일 수 있으므로 조건문으로 체크
• HTML이 완전히 로드된 후 이벤트 리스너 등록

🧠 핵심 학습 내용

1. 이벤트 기반 프로그래밍 패턴

• 사용자 행동 → 이벤트 발생 → 데이터 업데이트 → UI 재렌더링
• 명령형이 아닌 반응형 프로그래밍 접근
• 사용자 인터랙션과 데이터 동기화

2. DOM 조작과 타이밍

// 올바른 순서
document.body.innerHTML = Homepage(); // 1. HTML 먼저 렌더링
const limitSelect = document.querySelector("#limit-select"); // 2. 그 후 요소 선택
limitSelect.addEventListener("change", ...); // 3. 이벤트 리스너 등록

3. 상태 관리의 어려움

• 두 개의 드롭다운이 서로의 값을 참조해야 함
• limitSelect?.value, sortSelect?.value방식으로 현재 상태 획득
• 상태가 여러 곳에 분산되어 관리 복잡성 증가

📚 addEventListener 깊이 알아보기

addEventListener란?

DOM 요소에 이벤트 리스너(Event Listener)를 등록하는 JavaScript 메서드입니다. 사용자의 행동(클릭, 키보드 입력, 드롭다운 변경 등)에 반응하여 특정 함수를 실행합니다.

기본 문법

element.addEventListener(event, function, options)

• event: 감지할 이벤트 타입 ('click', 'change', 'input' 등)
• function: 이벤트 발생 시 실행할 함수
• options: 추가 설정 (선택사항)

다양한 이벤트 타입들

// 클릭 이벤트
button.addEventListener('click', () => {
  console.log('버튼 클릭됨!');
});

// 드롭다운 변경 이벤트 (오늘 사용한 것)
select.addEventListener('change', (event) => {
  console.log('선택 변경:', event.target.value);
});

// 키보드 입력 이벤트
input.addEventListener('input', (event) => {
  console.log('입력값:', event.target.value);
});

// 폼 제출 이벤트
form.addEventListener('submit', (event) => {
  event.preventDefault(); // 기본 동작 막기
  console.log('폼 제출됨');
});

event 객체의 유용한 속성들

selectElement.addEventListener('change', (event) => {
  console.log(event.target);        // 이벤트가 발생한 DOM 요소
  console.log(event.target.value);  // 현재 선택된 값
  console.log(event.type);          // 이벤트 타입 ('change')
  console.log(event.timeStamp);     // 이벤트 발생 시점
});

addEventListener의 장점

• 여러 리스너 등록 가능: 하나의 요소에 여러 이벤트 리스너 추가
• 이벤트 버블링 제어: 3번째 매개변수로 캡처링/버블링 설정
• 메모리 관리: removeEventListener로 제거 가능
• 관심사 분리: HTML과 JavaScript 분리