Random Quotes

Random Quotes 래퍼런스

알게된 점

constructor함수 내에서(처음 컴포넌트가 만들어질 때 실행)
this.render함수가 실행되는데, handleClickButton함수가 addEventListener의 콜백함수로 등록되는 로직이 포함되어있다.
그 콜백함수는 this.render함수 밑에 선언된 돔들을 조작하는 함수이다

콜백함수 안에 쓰인 돔들이 this.render함수를 실행하는 시점에는 존재하지 않게되지만 오류가 나지않았다

결론: 브라우저에 등록된 콜백 함수는 실행되기 전까지는 실행코드가 유효한지 모른다

코드

class RandomQuotes extends Component<undefined> {
  $quote: Element;
  $author: Element;
  constructor($target: Element) {
    // 실행 순서가 궁금해짐 = 콜백 함수는 실행되기 전까지는 실행코드가 유효한지 모른다
    super($target);
    this.render();
    this.$quote = document.querySelector('.quote'); 
    this.$author = document.querySelector('.author');
    this.handleClickButton();
  }

  template(): string {
    return `
      <div class='quotes-container'>
          <div class='content'>
            <p class='quote'></p>
            <h3 class='author'></h3>
          </div>
          <button class='change_button'>Generate Quote</button>
      </div>
    `;
  }

  async handleClickButton() {
    // api실행
    const { data } = await axios.get('https://free-quotes-api.herokuapp.com/');
    this.$quote.innerHTML = `"${data.quote}"`;
    this.$author.innerHTML = data.author ? `- ${data.author}` : '';
  }

  mount() {
    const $button = document.querySelector('.change_button'); 
    $button?.addEventListener('click', () => {
      this.handleClickButton();
    });
  }

  render() {
    this.$target.innerHTML = '';
    this.$target.innerHTML = this.template();
    this.mount();
  }
}
export default RandomQuotes;