Component 🐾

1. Component

1-1. 構成部品の定義

コンポーネント:リサイクル可能UI構成部

1-2. 構成部品の特徴

- 재활용하여 사용할 수 있다.
- 코드 유지보수에 좋다.
- 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
- 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

1-3. 構成部品はいつ必要ですか?

- 반복해서 출현하는 HTML UI
- 자주 변경되는 HTML UI
- 다른 페이지를 만들때 컴포넌트 사용 (컴포넌트 대신 withRouterHOC 사용 가능)

1-4. 構成部品を使用する際の注意点

- 컴포넌트의 첫글자는 대문자로 작성해야 한다. (소문자 입력 시 에러 발생)
- 컴포넌트를 과하게 많이 사용하면 복잡해질 수 있다. (state 사용할 때)

2. Class vs Functional Component

構成部品を宣言する方法は2つあります.1つは構成部品を宣言する方法です.

系素子

機能素子

1) Class Component

import React from 'react'

class Component extends React.Component {
  render() {
    return (
	<div>
		<h1>This is Class Component!</h1>
	</div>
     )
  }
}

export default Component

クラスの要素には、上記のrenderの関数があり、表示すべきJSXを返す必要があります.

ステータス機能&ライフサイクル機能

は、任意の方法

を定義することができる.
2) Functional Component

import React from 'react'

const Component = () => {
  return (
    <div>
		<h1>This is Functional Component!</h1>
	</div>
	)
};

export default Component

発表

は便利です.

メモリリソースの使用量が少ない.(プロジェクトの終了と構築後の導入時でも、成果物ファイルのサイズは小さくなります.)

欠点は

StateとライフサイクルAPIが使用できないことですが、Hooks機能の導入に伴い、ソリューションが実現しました!

🐥 結論−クライス型と関数型の役割と性能は同じである.また,関数型がより便利で,より多く使用されていることは明らかである.しかし、クライス型の基本的なスキルを学んだ後、私はHooksを完璧に理解し、関数型の形で次々とそれを書きます.🤪