Web_React #15

210826
Web_React #15
これまでjsxセクションはレンダリングで使用されていました.
しかし、この部分を変数に入れて使っても、正常に動作します.

import ReactDOM from 'react-dom';

const product = 'MacBook';
const model = 'Air';
const item = product + model;
const imageUrl = 
'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png';

const element = <>
      <h1>나만의 {item} 주문하기</h1>
      <img src={imageUrl} alt="제품 사진" />
      <button onClick={handleClick}>확인</button>
    </>;

function handleClick(){
  alert("곧 도착합니다!");
}


ReactDOM.render(
    element,  
    document.getElementById('root')
);

要素に入れて伝えました.

この要素をコンソールに出力しましょう

jsオブジェクトが出力される様子が見えます.
reactはreact elementと呼ぶ.
このReact要素をRenderメソッドに渡すと、Reactはオブジェクトを解析しhtmlとしてレンダリングします.
react elementはreact構成画面の最も基本的で最も核心的な要素である.
これを関数形式にすると、カスタムラベルのように使用できます.

import ReactDOM from 'react-dom';

const element = (
  <>
    <Hello />
    <Hello />
    <Hello />
  </>
)
function Hello(){
  return <h1>안녕 리액트</h1>;
}

console.log(element)
ReactDOM.render(
    element,  
    document.getElementById('root')
);

react要素を返すhello関数を作成した場合、要素変数にjsxコードを記述するときに、関数名のタグを使用できます.
Helloタグは、関数内で返されるタグを表します.

正常に動作.
このHelloという関数はReact Componentと呼ばれています.
Reactを開発する場合は、React要素をReactコンポーネントとして作成して利用します.
単純に関数を作成してコンポーネントになるわけではありません.
1.頭文字大文字
2.jsx構文を使用して作成されたreact Elementを返す必要があります.
リファレンス
https://www.codeit.kr/courses/react-frontend-development/topics/getting-started-with-react