03. JSX

• jsx는 슈가 문법으로 javascript를 확장한 문법이다.

• React에서 javascript로 마크업을 만들고, 시각적으로 좀 더 수월하게 표현하게 해주는 방법이다.

• JSX는 필수는 아니지만, UI 관련 작업을 할 때 도움이 된다.

• JSX는 HTML 태그를 넣을수 있을 뿐만 아니라,

그렇기 때문에, jsx 내부에 jsx를 사용해서 만들 수 있다.

단 jsx를 활용한 태그는 파스칼케이스로 만들것을 권장한다.

그 이유는 첫글자가 대문자가 아니라면, 기존의 HTML 태그로 인식할 수 도 있기 때문이다.

const Paint = ({title, description, children}) => {
    return (
    <>
        <h1>{title}</h1>
        <h3>{children}</h3>
           {children}
    </>
)
}


const element = (
    <>
        <Paint title ="Good" description = "good">
            {Paint({title : "Bad" , description="bad" children="hi"} )}
        </Paint>
    </>
)

이렇듯 jsx 내부에 jsx를 쓸수도 있으며, 더 나아가, javascript 문법을 활용해서 return 된 jsx를 활용해서 만들수 도 있다.

02. Multi Element

React.createElement('div',{
    children : [
    React.createElement("h1",null,'first'),
    React.createElement("h3",null,'second'),
    React.createElement("h5",null,'third')
]
})


///

React.createElement(
      "div",
      null,
      React.createElement("h1", null, "first"),
      React.createElement("h3", null, "second"),
      React.createElement("h5", null, "third")
    );

///

jsx 처럼
<div> 
  <h1>first </h1>
  <h3>second</h3>
  <h5>third</h5>
</div>

위와 같은 방식으로 하나의 요소 안에 여러개의 children 을 만들 수 있다.

하지만 위와 같은 방법의 문제점은 쓸데 없는 div를 감싼다는 문제가 있다.

그렇기 때문에 React에서는 Fragment라는 tag를 지원한다.

React.createElement(React.Fragment,{
    children : [
    React.createElement("h1",null,'first'),
    React.createElement("h3",null,'second'),
    React.createElement("h5",null,'third')
]
})


///

React.createElement(
      React.Fragment,
      null,
      React.createElement("h1", null, "first"),
      React.createElement("h3", null, "second"),
      React.createElement("h5", null, "third")
    );

///

jsx
<Fragment> 
  <h1>first </h1>
  <h3>second</h3>
  <h5>third</h5>
</Fragment>

Fragment를 사용하면, 쓸데없는 div 없이 자식들을 렌더링 할 수 있다.

jsx와 React.createElement를 통해, 하나의 컴포넌트 안에 다수의 자식을 만드는 법을 배웠다.

그리고, 그 자식들이 div로 감싸지는 것이 싫으면 React에서 제공해주는 Fragment 태그를 사용해서 감싸주면 된다.

React

• 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

React.createElement()

• jsx는 사실상 react.createElement()를 호출하기 위한 슈가 문법

• React.createElement(
    type,
    [props],
    [...children]
  )

  type의 인자로를 div와 span 같은 tag가 와도 되고, React Component, React Fragment 타입이 올수 있다.
• props에는 보통 attribute를 넣어준다.
• children은 자식요소를 넣어주는거로, 문자열일수도 있으며, 컴포넌트일수도 있다.
• 그리고 children을 props의 객체로 넣어줘도 가능하다.
• 만약 props를 통해 children Component에 data를 넘겨주고 싶으면, function으로 만들어 놓던지 아니면 class형태로 만들어서 쓰면 된다.
• 자세한 예제는 https://reactjs.org/docs/react-without-jsx.html
• https://reactgo.com/react-createelement-example/ 를 쓰면 된다.

JSX 를 주로 사용하지만, JSX의 기본이 되는 React.CreateElement는 위와 같이 작용을 한다.