[TIL] 0415

NotionClone Project 리팩토링

필드 선언에서 typescript와 javascript이 다르게 동작하는 부분을 발견했다.

클래스 확장을 했을 경우 부모 클래스의 constructor함수가 다 실행되고 나서 자식의 필드가 생성된다.

1. constructure함수 내부에서 프로퍼티 생성 및 할당
2. 1번에서 생성한 프로퍼티 이름이 자식 컴포넌트의 내부에 선언한 필드와 같은 이름일 경우 재할당한다.
3. 하지만 값 할당 없이 선언만 했을 경우
   • ts는 선언을 무시한다.
   • js는 undefined를 재할당한다.

js의 경우

class Sidebar extends Component {
 PageList; // js는 undefined를 재할당한다

 mounted() {
   console.log(this.PageList); // undefined 출력
   const $pageList = this.$target.querySelector('[data-component="PageList"]');
   
   // 첫 생성 및 할당
   this.PageList = new PageList($pageList, {
     data: this.state.pageListData,
     onClickRemove: this.handleClickRemoveIcon.bind(this),
   });
 }

 async fetch() {
   console.log(this.PageList); // PageList컴포넌트 출력
   const pageListData = await getDocumentList();
   
   // await의 영향으로 constructure함수가 다 실행되고, 
   // 자식 프로퍼티 생성하는 로직까지 전부 실행되고 나서 밑에 코드가 실행됨
   console.log(this.PageList); // undefined가 출력됨
   this.setState({ pageListData }, true);
 }

 reRender() {
   this.PageList.setState({
     data: this.state.pageListData,
   });
 }
}

export default Sidebar;

ts의 경우

class RandomQuotes extends Component<undefined, { [key: string]: string }> {
  Contents: Contents; // undefind가 재할당되지 않음 -> ts는 값이 없으면 아무것도 할당하지 않는다

  mounted() {
    console.log(this.Contents); // undefined 출력
    const $contents = this.$target.querySelector('[data-name="contents"]');
    
    // 첫 선언 및 할당
    this.Contents = new Contents($contents, this.state);
  }

  handleClickButton() {
    this.fetch();
  }

  async fetch() {
    console.log(this.Contents); // Contents컴포넌트 출력
    const { data } = await axios.get('https://free-quotes-api.herokuapp.com/');
    console.log(this.Contents); // Contents컴포넌트 출력
    this.setState({ quote: data.quote, author: data.author }, true);
  }

  reRender() {
    this.Contents.setState(this.state);
  }
}

export default RandomQuotes;