React 입문 第七番目 : JSX Children

JSX Children

지금까지는 children(자식) 을 가지고 있지 않은div, span과 같은 JSX요소들로만 작업했지만 이번엔 자식을 가지고 있는 요소로 해보겠습니다.

<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(자식)이라고 인식하게 됩니다.

그러니까 여기선 결국 list가

React.creatElement("ul", null, child1,child2,child3) 로 되는것이겠죠.

child1 이 One이들어있는 li에 해당되고, child2가 Two가 들어있는 li, child3가 Three가 들어있는 li에 해당됩니다.

알아둬야 할 중요한 점

1. return 할때는 () 안에 넣어주기!

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

이 함수를 보면서 이상하게 느끼는 점이 없으실 겁니다. 하지만, 이건 실제로 코드가 실행이 되지 않는데요, 그것은 자바스크립트가 가진 Automatic Semicolon Instertion(ASI)라는 기능때문인데요. 자바스크립트는 기능상, 자동적으로 return다음에 세미콜론을 넣어버립니다. 이 코드가 JSX에서 JavaScript로 바뀌게 되면, 코드는 실제로

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

이렇게 되버립니다. return뒤에 ;(세미콜론)이 붙는걸로 인해서, React.createElement에 도달하지 못하게 되는거죠.

이것을 방지하기 위해서는,

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

이렇게 ()안에 코드를 적어야합니다!

2. JSX Fragment

JSX를 리턴할때는 알아둬야 할 중요한 점이 하나 있습니다.

그것은,JSX는 오로지 한 element만 return 할 수 있다는 것입니다.

예를 들어, 밑의 경우에는, 하나의 div로 감싸던가 하지 않으면 return 되지 않습니다. 그렇기 때문에 div같은 요소로 감싸주어야 하는데요, 하지만 새로운 div같은 요소로 감싸게 되면 쓸모없는 html 코드를 쓰게 되어야 하기 때문에, JSX Fragment인 <></>로 감싸주면 됩니다.

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

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

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