210,318開発ログ(101日目)-ReactのコンポーネントとPropsは?
Component
反応器では、素子は関数素子とクラス素子に分けることができる.
文字通り、関数とクラスで素子をそれぞれ表す.
構成部品の名前は常に大文字で始まる必要があります.
理由は以下の通り.(出典:反応公式ページ)
Function Component
静的コンポーネントの管理性(16.8から応答時間を使用して動的に管理可能)
※Classは難しいのでFunctionでReact Hook(Classと同じ機能)を導入
Class Component
state、renderを使用して静的および動的コンポーネントを管理する
Props
propsは不変のデータであり、不変のデータである.通常、親(親)構成部品から子(子)構成部品にデータを渡すために使用されます.
たとえばindexです.js → app.jsx → welcome.jsxフローによれば,親と子の関係と考えられる.
次のコードは、この画面を表示します.
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// app.jsx
import Welcome from './components/welcome';
function App() {
return (
<div>
<Welcome name ="gojae" />
</div>
);
}
export default App;
//welcome.jsx
import React, { Component } from 'react';
class Welcome extends Component {
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>
</div>
);
}
}
export default Welcome;
Reference
この問題について(210,318開発ログ(101日目)-ReactのコンポーネントとPropsは?), 我々は、より多くの情報をここで見つけました https://velog.io/@gojaegaebal/210318-개발일지101일차-React에서-Component와-Props는テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol