Chapter 10. class素子

以前のChapterでは、関数形式の要素宣言が使用されていました.
しかし,外部からデータを取得・処理するためには一定の限界があるため,クラス形式の素子宣言方式が必要である.
今回のChapterでは、classコンポーネント宣言について説明します.

1.クラス構成部品の宣言

index.js

index.jsでは、classコンポーネントとして生成されるappコンポーネントを呼び出すように記述される.

App.js

機能形状要素宣言

function App(){
	return (
		...	// HTML
	);
}

類形状要素宣言

class App extends React.Component{
	render(){
		return(
			...	// HTML 태그
		);
	}
}

reactコンポーネントを作成するには、まずreactクラスを継承する必要があります.
継承時にextends reactがある場合.コンポーネントが長すぎる場合は、次のようにimport文を変更できます.

import React, {Component} from 'react';

前述したように、import文を変更する場合は、構成部品を作成するときに、次の内容を記述するだけです.

class App extends Component{
	...
}

完全コード(App.js)

2.構成部品ライフサイクル

今回は、素子のライフサイクルについてご紹介します.
他のプログラミング言語を学んだ人であれば、classで生成されたオブジェクトには、作成から破棄までのライフサイクルがあることがわかります.
reactにもこのようなライフサイクルがあり、コードを通じてさらに理解します.

App.js

結果ウィンドウ

私たちがこのコードで知っている順序はconsoleです.ロゴで確認できます.
constructor > render > componentDidMount
1. constructor(props):
この関数はコンストラクション関数の作成者であり、コンストラクション関数にsuper(props)を追加する必要があります.
ここで、superは親の作成者であり、親は現在のコードでreactである.コンポーネントクラスを表します.
2. render():
その名の通り、実際に提示する必要がある内容をレンダリングする部分と見なすことができる.
表示される画面には、どのような内容が含まれているのか、HTMLで実現すればよい.
3. componentDidMount():
レンダリングが完了すると、DOMには呼び出しの方法でアクセスできます.
まだ内部を直接埋め尽くしていませんが、JS連動やAJAX処理、settimeoutなどの部分を入れるのが一般的です.
4. componentWillUnmount():
デバイスがDOMから消えてから動作する方法.
5. componentDidUpdate():
画面に情報が更新されている場合は、この方法を実行します.

3.終了

今日、class形式で構成部品を宣言する方法と、構成部品のライフサイクルについて説明します.
既存の関数形式の素子宣言方式は外部データのインポートと処理に一定の限界があり、class素子を使用しているが、これらの部分は実際に作成されていないため、まだ触れていないようだ.
もっとChapterを勉強します!
完全なソースGitリンク
https://github.com/cho876/React/tree/master/chapter10