(TIL 3) React.jsキーコンセプトコンポーネント

11877 ワード
React TIL react.js component テキストリンク

1) 🤔構成部品とは


私たちは最初の位置決めで素子について話したことがあります!
しかし、これは最も重要な概念なので、もう一度概念を言いたいです.
素子は反応の花🌼!
既存のWebフレームワークはMVCモードを採用し、モデルが情報を担当し、ビューが画面を担当し、コントローラが駆動を担当している.しかしMVCの各要素は依存性が高く再利用が難しい.つまり、一つだけ変えるのは容易ではありません!
例えば
EX)
既存のMVC構造は、メニュー、バナー、メインコンテンツで構成されており、メインコンテンツ部分の情報、画面、機能を他の場所で使用する場合は複雑になります.ただし、各モジュールは、構成要素を使用して独立してMVCを構成することができる.
つまり.メニュー、バナー、メインコンテンツにはそれぞれMVCがあります.すると、メインコンテンツ部分も他のページから簡単に読み込んで使用できます!

2）部品アセンブリ


データコンポーネントフィーチャーは、親構成部品から子構成部品に渡される読取り専用データステータス構成部品のステータスであり、データコンテキストの親構成部品でそのステータスのデータを作成して変更し、すべての子構成部品にデータを渡すことができます.

3）使用部品例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>컴포넌트</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    class Box3 extends React.Component{
        render(){
            return(
                <div>코린이입니다</div>
            )
        }
    }
    class Box2 extends React.Component{
        render(){
            return(
                <div>져니입니다</div>
            )
        }
    }
    class Box1 extends React.Component{
        render(){
            return(
                <div>안녕하세요!</div>
            )
        }
    }
    class App extends React.Component{
        render(){
            return(
                <>
                    <Box1 />
                    <Box2 />
                    <Box3 />
                </>
            )
        }
    }
        ReactDOM.render(
            <App />,
            document.querySelector('#root') 
        )
    </script>
</body>
</html>
私はBox 1,Box 2,Box 3をアップルのコンポーネントに入れました.
そしてRealtDOMrenderはAppコンポーネントのみをインポートしました

💻 結果



部品のセットを一つ一つ紹介していくみたい!
こんにちは!😊 私は公費支援で開発の勉強を始めた学生です!
もし私が提供した情報に間違いがあったら、メッセージを残してください.💚
私の文章を読んでくれてありがとう.🙇‍♀️
[TIL]反応一次:コンポーネント、Props、State
[白俊(baekjoon)]Nodejs I/O