React | 3. HTML렌더와 JSX

HTML 렌더하기

ReactDOM.render()

reactDom.render() function은 두개의 argument를 받을 수 있는데, html 코드와 html 요소이다.

 

 

이렇게 직접 html 코드를 받거나

ReactDOM.render(<p>Hello</p>, document.getElementById('root'));

 

또는 

const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
);

ReactDOM.render(myelement, document.getElementById('root'));

이런 식으로 id값을 가져와서 렌더할 수 있다.

이렇게 가져온 것을 웹페이지에 그리게 된다.

 

 

JSX

JSX는 자바스크립트 XML이다. JSX는 React에서 HTML작성을 쉽게 해주기 때문에 React에서 매우 중요하다.

JSX는 React '요소'를 만든다. 그 요소들이 DOM에 렌더링되는 것이다.

 

JSX를 사용했을 때 

const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));

JSX가 없을 때

const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));

 

{ } 안에 표현식 넣기

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

표현식은 React 변수, 프로퍼티 외 다른 자바스크립트 표현식들이 들어갈 수 있다.

위와 같은 코드는 { }안의 5+5이 연산되어 실행된다.