return 방식

React.createElement

React.createElement는 DOM요소를 객체로 반환하여 Virture DOM 실현시키며, 이것으로 인해 최적의 퍼포먼스를 기대할 수 있다.

• 리액트 요소는 제일 작은 하나의 블록이고, 이 조그마한 조각이 UI의 한 부분이 된다.
• React.createElement는 React요소를 반환한다.
• React.createElement("태그타입","옵션(클래스,스타일),"텍스트")로 선언된다.

  // React.createElement
  function App() {
    return React.createElement('h1',{className: 'title', style: {fontSize: '10px', color: 'blue'}}, 'Hello')
  }

  
  

JSX(Javascript XML)

JSX는 React.createElement 가독성 문제로 HTML과 동일한 형식을 사용 가능하도록 만들었다. 하지만 HTML과 같은 마크업 언어가 아닌 JSX는 JavaScript라는 것을 잊어서는 안된다.

• JSX의 표현식은 중괄호로 감싸져야 한다. {표현식}
• 만약 속성의 값이 문자열이면, 따옴표로 감싼다 "",''
• 만약 속성의 값이 표현식이면 중괄호로 감싼다 {}

  // JSX
  function App() {
    return  <h1 className="title" style={{fontSize: "10px", color: "blue"}}>Hello</h1>
  }

---

Fragment

JSX를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. 이는 React가 하나의 컴포넌트만을 리턴할 수 있기 때문이다. 이때 Fragment를 사용하면 DOM에 별도의 NODE를 추가하지 않고 여러자식을 그룹화 할 수 있다

DIV 사용 시 DOM Tree 결과

실제로 사용하지는 않지만 JSX 규칙에 의해 <div>와 같이 감싸는 요소를 정의하면 HTML의 DOM 구조에도 <div>는 적용된다.

function App() {
  return (
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  );  
}

<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>

Fragment 사용 시 DOM Tree 결과

불필요한(의미없는) <div> 생성없이 <React.Fragment>로 감싸서 반환한다면 Fragment는 DOM에 추가되지 않기때문에 실제 Dom Tree는 아래와 같이 구성될것이다.

function App() {
  return (
    <React.Fragment>
      <td>Hello</td>
      <td>World</td>
    </React.Fragment>
  );
}

//또는 <> 구문으로 대체가능함
function App() {
  return (
    <>
      <td>Hello</td>
      <td>World</td>
    </>
  );
}

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

---

JavaScript 동적 값 할당은

자바스크립트의 객체를 JSX내에서 사용할 때에는 {}를 사용합니다.

function App() {
  const name = 'World'
  return (
    <h1>Hello {name} </h1> 
  );
}

<h1>Hello Word</h1>

&& 조건식사용시

JavaScript에서 true && expression은 항상 expression으로 평가되고, false && expression은 항상 false로 평가되므로 && 뒤의 엘리먼트는 조건이 true일때 출력이 됩니다. 조건이 false라면 React는 무시합니다.

false로 평가될 수 있는 표현식을 반환하면 뒤에 있는 표현식은 건너뛰지만 false로 평가될 수 있는 표현식이 반환된다는 것에 주의! 아래 예시를 통해 주의해야되는 이유를 참고하자

function App() {
  const name1 = undefined;
  const name2 = 'World';
  const count = 0;
  return (
    <>
      {name1 && <h1>Hello {name1} </h1>}
      {name2 && <h2>Hello {name2} </h2>}
      {count && <h3>count = {count}</h3>}
    </>
  );
}

위의 예시에서, count = 0 이므로 false로 표현식은 건너뛰지만 count에 0이 반환된다. 즉, 아래와 같은 결과가 render 메서드에서 반환되므로 주의하셔서 사용이 필요하다.

<h2>Hello Word</h2>
0

반복문 사용시

React의 JSX 내부에선 for 구문을 이용할 수 없다. 때문에 내장 함수인 map을 사용해야된다.

function App() {  
  return (
    <ul>
      {['item1', 'item2'].map(item => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

<ul>
  <li>item1</li> 
  <li>item2</li>
</ul>