[React] JSX 랜더링

출처: https://www.codecademy.com

JSX 랜더링하기

JSX 랜더링이란? JSX 코드 표현을 화면에 나타내기 위한 작업

ReactDOM.render()

    import React from 'react';
    import ReactDOM from 'react-dom';

    ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

ReactDOM은 자바스크립트 라이브러리의 React-specific method 이며, ReactDOM.render()는 가장 보편적인 JSX 랜더링 메서드이다.

위 코드에서 <h1>Hello world</h1> 는 ReactDOM.render() 의 첫번째 argument 로써, 이 부분이 화면에 보여지게 된다.

ReactDOM.render() 메서드의 첫번째 argument 는 JSX 코드여야 한다.

document.getElementById('app') 는 ReactDOM.render() 의 두번째 argument 로써, 리액트 애플리케이션의 위치를 결정한다고 보면 된다.

즉, HTML에 들어갈 위치인 id, 또는 클래스 이름을 두번째 인자에 입력한다.

결과적으로 위 JSX 코드를 html 로 표현해보면 아래 코드와 동일한 결과를 보여준다.

    <main id="app">
      <h1>Hello world</h1>
    </main>

<h1>Hello world</h1> 가 id="app" 에 해당하는 부분에 들어가게 된다.

ReactDOM.render() 로 변수 넘기기

ReactDOM.render() 의 첫번째 argument 로 JSX로 선언된 변수를 넘길 수 있다.

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    // Write code here:
    const myList = ( 
        <ul>
            <li> list1 </li>
            <li> list2 </li>        
        </ul>
    );
    
    ReactDOM.render(myList, document.getElementById('app'));

위 JSX 코드를 html 로 표현해보면,

    <main id="app">
      <ul>
          <li> list1 </li>
          <li> list2 </li>        
      </ul>
    </main>

ReactDOM.render()의 특별한 점은

기존 코드에서 변화된 부분만 update 한다는 점이다.

만약, 똑같은 코드를 두번 랜더링하려고 한다면 두번째 랜더링 작업은 아예 이루어 지지 않는다.

    const hello = <h1>Hello world</h1>;
    
    // This will add "Hello world" to the screen:    
    ReactDOM.render(hello, document.getElementById('app'));
    
    // This won't do anything at all:    
    ReactDOM.render(hello, document.getElementById('app'));

이것과 관련해서 더 알고싶다면, virtual DOM 의 관하여 살펴보시기 바란다.

https://www.codecademy.com/articles/react-virtual-dom