[TIL] 0521

Vanilla TS 프로젝트

기존에 베이스 컴포넌트를 구성할 때 컴포넌트를 생성할 때 받는 element를 target이라고 지칭했다. 부모 돔으로 여기고 컴포넌트 내부에서 template메소드를 이용해 target돔의 내용을 생성해주는 걸부모 돔에 내 돔을 만드는 걸로 여겼었는데, 이럴 경우 컴포넌트를 연결할 target인 돔이 무조건 있어야했고, 이럴 경우 불필요한 태그가 생길 수 있기 때문에 시맨틱하지 않아 고민이었다.

결국 컴포넌트 생성 시 받는 element를 내 돔으로 여기고, 컴포넌트 내부에서 template를 삽입하는 걸 생성 시 받아온 내 돔에 자식 태그들을 생성해주는 것으로 하는 것으로 변경했다.

컴포넌트 생성 규칙

• 내 돔은 외부(부모 컴포넌트)에서 템플릿으로 만든 후 내 컴포넌트 생성 시 받아온다.
• 자식 컴포넌트가 될 돔은 data속성을 사용해 component로 표시해준다.

컴포넌트 본인의 돔을 외부에서 생성 하는 이유?
태그 안의 여러 속성을 정의하고 부모 컴포넌트와의 연결 과정을 편하게 하기 위함.
컴포넌트 내부에서 내돔을 생성할 경우 템플릿 리터럴 방법을 쓸 수 없고 createElement, setAttribute, appendChild 메소드를 이용해서 만들어야하기 때문에 번거롭고 불편하다.

// 부모 컴포넌트 내부

  template() { // 자식 컴포넌트가 될 돔은 data속성을 사용해 component로 표시해준다.
    return `  
      <section class="content_section">
        <ul data-component="ContentList" class="content-list"></ul> 
      </section>
  `;
  }

connectChild(){
    const $contentList = this.$node.querySelector('.content-list');
	new ContentList({
        $node: $contentList, // 이름을 $target -> $node로 변경
        props: {
          contentListData,
        },
      });
}