2 React | Rendering

2-1. 엘리먼트 업데이트

리액트 엘리먼트는 불변 객체이다.
엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없다.
따라서 엘리먼트를 업데이트 하기 위해서는 완전히 새로운 엘리먼트를 만들고
ReactDOM.render 로 다시 렌더링 하는 방식을 사용한다.

<script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById("root"));

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

    setInterval(tick, 1000);	// setInterval 메서드를 이용해서 1초에 한번씩 렌더링해준다.
</script>

2-2. 조건부 렌더링

<script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById("root"));

    const answer = parseInt(prompt("리액트가 재미있으신가요? \n 1.재미있다. \n 2.어렵다")); // prompt는 입력받을 수 있는 알럿창 -> 문자열로 입력받아서 parseInt 붙여서 숫자로 형변환

    // 1. 렌더링 시 조건 비교 후 조건부 렌더링 (최대한 조건식이 심플할 때 사용)
    const positiveElement = <h1>앞으로 점점 더 재밌어질 거예요</h1>;
    const negativeElement = <h1>천천히 앞의 내용을 복습 해 보세요</h1>;

    /* root.render(
        (answer === 1) ? positiveElement : negativeElement
    ); */

    // 2. && 연산자를 이용하여 조건부 엘리먼트 생성 (조건이 맞을때만)
    /* const element = (answer === 1) && <h1>앞으로 점점 더 재밌어질 거예요</h1>;
    root.render(element); */

    // 3. jsx 내에서 조건부로 엘리먼트 생성하기

    // 3-1. if 문으로 조건부 엘리먼트 생성하기
    /* let element;
    if(answer === 1){
        element = <h1>앞으로 점점 더 재밌어질거예요</h1>;
    }else {
        element = <h1>천천히 앞의 내용을 복습 해보세요.</h1>;
    } */

    
    // 3-2. 삼항 연산자로 조건부 엘리먼트 생성하기
    const element = (answer === 1) ? <h1>앞으로 점점 더 재밌어질거예요</h1> : <h1>천천히 앞의 내용을 복습 해보세요.</h1>;
    // * 변수보다 상수를 사용하는게 좋음. 변수는 어떤 값이 들어올지 모르기 때문에.

    root.render(element);
    
</script>