Component-rendering

3-1. Rendering Element

• 이 안에 들어가는 모든 엘리먼트를 ReacDOM에서 관리하기 때문에 이것을 Root DOM node라고 부름
• 일반적으로 React로 구현 된 애플리케이션은 하나의 루트 돔 노드가 있음
• 단, 리액트를 기존 앱에 통합하려는 경우에는 원하는 만큼의 독립 된 루트 돔 노드를 가질 수 도 있음
• React Element를 루트 DOM 노드에 렌더링 하려면 ReactDOM.createRoot(루트 DOM 노드).render(렌더링 할 엘리먼트)
• ReactDOM.createRoot 의 반환값은 ReactDOMRoot 객체. 그 객체가 가지고 있는 render 메소드를 사용하기 위해 루트 생성

const element = (
  <>
  	<h1> What time is it now? </h1>
  	<h3> It is { new Date().toLocaleTimeString() } </h3>
  </>
);

ReactDOM.createRoot(document.getElementById('root')).render(element);

3-2. Rendered Element Update

• 리액트 엘리먼트는 불변 객체(immutable)
• 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없음
• 엘리먼트를 업데이트 하기 위해서는 완전히 새로운 엘리먼트를 만들고 다시 render 호출

<div id="root"></div>

    <script type="text/babel">

        const ReactClientDOM = ReactDOM.createRoot(document.getElementById('root'));

        function tick(){
            const element = (
                <>
                    <h1>What time is it now?</h1>
                    <h3>It is { new Date().toLocaleTimeString() }</h3>
                </>
            );

            ReactClientDOM.render(element);
        }

        tick();
        setInterval(tick, 1000);
       
        /* 1초마다 tick 함수를 호출하여 새로운 엘리먼트를 생성하고 렌더링 한다.
        매 초마다 새로운 엘리먼트가 다시 렌더링 되지만 개발자 도구의 elements를 살펴보면 실제 업데이트 되는 부분만 갱신 되는 것을 확인할 수 있다. 
        
        리액트 엘리먼트는 메모리 상에서 연산 되는 가상의 돔.
        가상 돔은 실제 돔과 동일한 렌더 트리를 가지고 있다.(복제본)
        render 호출 시 새로운 렌더 트리를 만들고 가상의 돔과 비교 한다. (diff 알고리즘)
        비교 결과 변화가 있는 부분만 실제 돔에 반영한다. */

    </script>

3-3. Conditional Rendering

• 조건부 렌더링
• 여러 개의 엘리먼트 중 특정 조건에 따라 한의 엘리먼트만 렌더링 할 수 있음

 /* 1. 렌더링 시 조건 비교 후 조건부 렌더링*/
        // const positiveElement = <h1>앞으로 점점 더 재미있어 질거예용~</h1>
        // const negativeElement = <h1>천천히 앞의 내용을 복습해보세용!</h1>

        // ReactDOM.createRoot(document.getElementById('root')).render((answer === 1 )? positiveElement : negativeElement);

        /* 2. JSX 내에서 조건부로 엘리먼트 생성 */
        /* 2-1. if문 */
        // let element;
        // if(answer === 1){
        //     element = <h1>앞으로 점점 더 재미있어 질거예용~</h1>;
        // }else{
        //     element = <h1>천천히 앞의 내용을 복습해보세용!</h1>;
        // }

        /* 2-2. 삼항연산자 */
        //const element = (answer === 1)? <h1>앞으로 점점 더 재미있어 질거예용~</h1> : <h1>천천히 앞의 내용을 복습해보세용!</h1>;

        /* 2-3. && 연산자를 이용한 조건부 엘리먼트 생성
        -> 특정 조건을 만족하는 경우에만 렌더링을 하고 그렇지 않은 경우 아무것도 보이지 않게 하고 싶은 경우 사용. */
        //const element = answer === 1 && <h1>앞으로 점점 더 재미있어 질거예용~</h1>;

        /* 주의 사항
        false 조건을 가지고 렌더링을 하는 경우 조건에 일치하지 않으면 렌더링 되는 요소가 없지만 0과 같이 falsy한 값을 이용해 조건부 엘리먼트 생성을 하면 0을 반환한다. */

        const number = 0;
        const element = number && <h1>0이 아닙니다.</h1>
        
        ReactDOM.createRoot(document.getElementById('root')).render(element);