inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

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

해결된 질문

295

geuni

작성한 질문수 11

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 react

답변 1

1

김정환

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

2. 네 맞습니다.

0

geuni

답변 감사합니다!

리액트 1,2부 이후 후속 강의나 준비 중인 다른 강의가 있으신가요?

1

117

2

super.show() 호출하는 이유가 궁금합니다.

1

103

2

class와 constructor를 이용한 객체 지향 프로그래밍

0

244

2

mvc 패턴 질문

0

211

2

Cannot read properties of undefined (reading 'props')

0

291

2

delegate, emit 필요한 이유

0

206

2

어떤거를 먼저 들어야 하는지 도와주세요

1

275

1

localhost:8080 접속 불가

1

296

1

최근검색어 3 풀이에서

1

195

1

import 문제

1

248

1

자동변환 관련

1

213

1

sort() 질문 드립니다.

1

312

2

reset 시점에 searchResult 빈 배열로 update

2

321

2

Button에 Onclick사용

1

263

1

npx lite-server error 확인 요청드립니다.

1

484

2

node 20이상 쓸때 꿀팁

4

781

3

디버깅 관련질문이 있습니다.

1

310

1

[순수JS2]탭 3(풀이) 질문있습니다.

1

236

1

추상화를 어떻게 받아들이면 될까요??

1

446

1

on 메서드 eventName 문의

1

268

1

import에 관해서 질문드립니다

1

264

1

view.js의 on 메소드에 대해 질문드립니다

1

266

1

componentDidMount에서 getKeywordList()를 하는 이유

1

249

1

[순수JS1]검색폼2_git branch 이동관련

1

285

1