강의

멘토링

로드맵

인프런 커뮤니티 질문&답변

geuni님의 프로필 이미지
geuni

작성한 질문수

[React 1부] 만들고 비교하며 학습하는 React

[순수JS 2] 탭 3(풀이)

delegate 헬퍼 함수의 용도가 궁금합니다.

해결된 질문

작성

·

287

0

1. 이벤트 전파를 통해 공통된 하위 요소에 이벤트를 바인딩하기 위해서 사용하는 게 맞을까요?

2. 그리고 하위 요소가 렌더링 되기 전에 이벤트 바인딩해도 문제가 없는 게 상위 요소를 매개체로 바인딩해서가 맞을까요?

const liElements = qsAll('li', this.element);

liElements.forEach(li => {
  li.className = li.dataset.tab === selectedTab ? 'active' : '';
  li.addEventListener('click', (e) => {
    const payload = { tabType: li.dataset.tab, }
    this.emit(EVENT_TYPE.TAB_CLICK, payload)
  });
});

제가 구현했을때는 tabList가 렌더링 된 다음에 이벤트 바인딩해야 된다 생각해서 show 메서드 내부에서 바인딩하였는데 delegate 함수 사용하니 하위 요소 렌더링 여부가 무관해졌습니다.

 

퀴즈

MVC 패턴에서 애플리케이션의 데이터를 관리하고 상태를 저장하는 역할을 하는 컴포넌트는 무엇일까요?

View (뷰)

Controller (컨트롤러)

Model (모델)

Template (템플릿)

답변 1

1

김정환님의 프로필 이미지
김정환
지식공유자

1. 버블링된 이벤트를 하나의 부모 요소에서 처리하기 위해서 사용하는 함수입니다. (자식 엘리먼트에 이벤트 핸들러를 바인딩하지 않고요.)

2. 네 맞습니다.

geuni님의 프로필 이미지
geuni
질문자

답변 감사합니다!

geuni님의 프로필 이미지
geuni

작성한 질문수

질문하기