render

render 함수

render 함수는 작성한 JSX를 변환하여 화면에 출력하는 작업을 수행한다.

데이터가 변경된다면 다시 render 함수를 불러야 한다. 부르지 않는다면 화면은 변경되지 않는다.

let number = 0;

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <>
        <h1>number is {number}</h1>
    </>
);

setInterval(()=>{
    number++;
}, 1000);

1초마다 number를 1씩 증가하도록 코드를 작성하였으나 화면에서 보이지 않는 이유는 render 함수를 호출하지 않았기 때문이다. 증가하는 값을 정상적으로 출력하려면 render 함수를 데이터가 변할 때마다 호출해야 한다.

let number = 0;

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(
    <>
        <h1>number is {number}</h1>
    </>
);

setInterval(()=>{
    app.render(
        <>
            <h1>number is {number}</h1>
        </>
    );
    number++;
}, 1000);

중복되는 코드가 발생하므로 다음과 같이 정리할 수 있다.

let number = 0;

const app = ReactDOM.createRoot(document.querySelector("#app"));
function startRendering(){
    app.render(
        <>
            <h1>number is {number}</h1>
        </>
    );
}

startRendering();
setInterval(()=>{
    number++;
    startRendering();
}, 1000);

정리된 코드도 효율적이라고 볼 수는 없지만 함수 또는 클래스를 이용한 컴포넌트 구조를 갖추기 전에 사용할 수 있는 방법이라고 할 수 있다.

디지털 시계 만들기

const app = ReactDOM.createRoot(document.querySelector("#app"));
function startRendering(){
    const time = moment().format('YYYY-MM-DD A hh:mm:ss');
    app.render(
        <>
            <h1>현재 시각 : {time}</h1>
        </>
    );
}

startRendering();
setInterval(startRendering, 1000);