React { JSX, Fragment, Interpolation }

JSX

- React.createElement 표현식

- JSX의 사용을 위해 javascript compiler인 Babel이 필요하다. 

- Spread 연산자 응용가능 

const element = <h1>Hello, world!</h1> // 간단한 JSX

// Spread 연산자를 이용한 속성 삽입 

const props = { className: titleClassName, children:text};
const custom = <h1 {...props} />;
const element = custom;
ReactDOM.render(element, rootElement);

---

React.Fragment 를 이용한 멀티 Element 생성 

<></> 이런식으로 빈태그로 감싸줘도 적용이된다.  이때 의문이다 왜 React.Fragment를 쓰게되는가? 

const rootElement = document.getElementById("root");
const element = (
  <React.Fragment>
      <h1>Hi</h1>
      <h2>bye</h2>
      <h3>me</h3>
  </React.Fragment>
  );
ReactDOM.render(element, rootElement);

만약 저 React.Fragment 자리에 div를 넣으면 어떻게 될까 ? 

이런식으로 굳이 불필요하게 div요소로 감싸줄 필요가 없으면 React.Fragment가 태그처럼 요소들을 다같이 잡아주는 역할한다.

 

---

Element 찍어내기 

const Stamp = ({title, description, children}) => (
  <>
      <h1>{title}</h1>
      <h2>{description}</h2>
      {children}
  </>
);

const element = <>
  <Stamp title="one" description="two"/>
  <Stamp title="three" description="four"/>
  <Stamp title="five" description="six"/>
</>

ReactDOM.render(element, rootElement);

이렇게 Custom Element(Tag)로 element를 찍어내고 싶다면 이름의 첫글자를 Upper Case로 해야한다

props에  children도 추가해도된다. children안에 또다른 element를 계속 넣어줘도 되고 이걸로만 해도 확장성이 엄청난걸 알 수 있지만 다른 강에서 다뤄본단다.

 

---

Javascript 와 JSX 의 혼용

const Number = ({number, selected}) => {
  return selected ? <h1>{number}</h1> : <h3>{number}</h3>
}

const element = (
  <>
  {[1,2,3,4,5,6,7,8,9,10].map((number) => (
    <Number 
    className="title" 
    key={number} 
    number={number} 
    selected={number ===3}/>
  ))}
  </>
);

ReactDOM.render(element, rootElement);

Interpolation  :  서로 다른 템플릿을 혼영해서 사용하는것