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

1. Component파일에서 emit과 on의 기능이 정확히 뭔가요?

 

A: 아마 두 개의 챕터에서만 사용 중이고 방식이 조금 다르게 되어 있을 것이라 혼란이 있을 수 있을 것 같습니다. 자식에서 일어난 이벤트를 부모로 전파하는 방식 중 자주 사용되는 방식은 두 가지 정도 있는데요.

 

(1) 부모에서 자식을 생성할 때 props 로 이벤트 핸들러 함수를 직접 전달하고 자식 컴포넌트에서 그 이벤트가 실행되는 시점에 실행하는 방식 (React 스타일)

 

(2) 자식이 이벤트를 발생시킬 때 부모가 그 이벤트에 맞춰 콜백함수를 전달하는 방식 (Vue 스타일 || 일반적인 DOM Event)

MusicPlayer와 ImageDriveClone 에서는 이중에서 2번 스타일을 모방하여 구현해보았습니다.

on 함수는 이벤트를 등록할 때 사용하는 함수이고,
emit 은 특정 이벤트가 발생하는 시점을 가리킬 때 사용합니다.

예를 들어 clickTab 이라는 이벤트가 자식에서 일어날 것으로 알고 있는 상황에서 부모 컴포넌트가 자식컴포넌트를 안에서 생성하면서 childComponent.on("clickTab", () => console.log("clickTab in child component")); 로 선언해두면,

 

자식 컴포넌트 안에서 this.emit("clickTab"); 이 실행될 때마다 위에 부모 함수에서 등록해둔 () => console.log("clickTab in child component") 콜백 함수가 실행되는 것입니다.

 

this.events 를 보시면 아시다시피, on 과 emit은 this.events 객체를 참조하면서 실행을 하고 있으며,

on 이벤트를 걸게 되면

this.events = {
  "clickTab": () => console.log("clickTab in child component")
}

형태로 생성되어 있다가, emit 시에 실행하게 됩니다.

 

2. this.events라는 변수가 있는데 this.events는 생성자를 안써줘도 기억할 수 있는 건가요?

A: 이 부분은 생성자에 모두 쓰기 번거로워서 그냥 쓰지 않았는데요.. 생성자에서 미리 선언해주는 편이 더 직관적이고 좋습니다.  자바스크립트의 경우에는 properties 들을 생성자에서 선언하지 않더라도 어디서든 선언해도 사용할 수 있습니다. 하지만.. 이런 자유로움 때문에 나중에 코드를 파악할 때 어려움이 생길 수 있기 때문에 생성자나 혹은 다음과 같은 형태로 미리 등록해주시는 것도 좋습니다. 이 부분은 미처 챙기지 못해 죄송합니다. _ _)

 

export default class PlayList {
    rootElement;
    musicList = [];
    events;

    constructor() {
        this.rootElement = PlayList.createRootElement();
        this.musicList = [];
        // 로컬 스토리지에 저장해놓은 것이 있으면 호출
        this.loadStorage();
        // 이벤트 바인딩
        this.bindEvents();
    }

 

 

안녕하세요, bonfire 입니다.

먼저 답변이 늦어 죄송합니다. 연말에 급한 일정이 있어 답변이 지연되게 되었습니다. 오래 기다리시게 해서 죄송합니다. 

추가 영상은 계획된 바가 현재로서는 없어서 따로 확답을 드리기 어렵습니다.

개인적인 생각으로는 추가 영상보다는 질문을 주시는 편이 나을 것 같습니다. 설명의 범위를 구체적으로 잡기가 어렵기 때문이기도 하고, 어떤 부분에서 어려움을 느끼시는지 알기 어려울 수 있기 때문입니다.

우선 순위를 정리해보셔서 하나씩 이 채널에 질문을 주신다면 몇 개가 되든간에 최대한 답변을 드리겠습니다. 이런 걸 질문해도 될까? 라던지 너무 많을 것 같은데라는 생각은 접고, 궁금증이 생긴다면 얼마든지 질문 부탁드립니다. 다만, 잘 진행되지 않거나 하는 것에 대해서는 상황을 자세히 설명해주실 수록 파악과 설명드리기가 더 쉬울 것 같습니다.