[TIL] 0415
11664 ワード
NotionClone Project Refactoring
フィールド宣言でtypescriptとjavascriptの違いが見つかりました.
クラスを拡張すると、親のコンストラクション関数が実行され、サブクラスのフィールドが生成されます.
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;
Reference
この問題について([TIL] 0415), 我々は、より多くの情報をここで見つけました https://velog.io/@yooon26/TIL-0415テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol