React入門第一眼:JSX Children

JSX Children

これまでは、JSX要素(divやspanなど)のみを使用しており、サブ要素(children)は使用されていません.

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

//위의 코드는 JSX로 하면 
const list = 
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>;

//위의 코드를 React.createElement를 쓰면
const list = 
React.createElement("ul", null, 
    React.createElement("li", null, "One"),
    React.createElement("li", null, "Two"),
    React.createElement("li", null, "Three")
)

上のコードのように、React.createElementに書き込むと、3番目のパラメータがchidlren(子)として認識されます.
だからここで最終リストです.
React.createElement(“ul”,null,child1,child2,child3)
child 1は1つのliに対応し、child 2は2つのliに対応し、child 3は3つのliに対応する.

注意すべきポイント

1.戻るときは()に入れます!

function thisList() {
    return 
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>;
}

この関数を見ると変なところはありません.ただし、JavaScriptという自動Semicolon Instition(ASI)という機能を持つため、コードを実行することはできません.機能上、JavaScriptは自動的に戻り、セミコロンを挿入します.このコードがJSXからJavaScriptに変更された場合、コードは実際には

function thisList() {
    return;
    React.createElement("ul", null,
        React.createElement("li", null, "One"),
        React.createElement("li", null, "Two")
    );
}

こうなる戻ると接着するから、反応する.createElementに到達できません
それを防ぐために、

function thisList() {
    return( 
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
      );
}

()内にコードを書かなければなりません!

2. JSX Fragment

JSXに戻るにあたって、ちょっと注意が必要です.

つまり、JSXは1つの要素しか返されません。

たとえば、次の例では、divを使用して小包を包まないと返されません.したがって、divなどの要素を使用して保護する必要がありますが、新しいdivなどの要素を使用して保護する場合は、不要なhtmlコードを作成する必要があります.そのため、JSX分割<>を使用して保護できます.

function greeting(){
return(
	<h1>안녕하세요</h1>
	<h3>저는 누구입니다</h3>
	<div>후후훗</div>
)}

//이것을 밑처럼 하나의 요소로 만들어 주기!!
//⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩

function greeting(){
return(
<>
	<h1>안녕하세요</h1>
	<h3>저는 누구입니다</h3>
	<div>후후훗</div>
</>
);
}