# render

## render 함수

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

<figure><img src="/files/fcJkyvYCd7S1987GBmLr" alt=""><figcaption></figcaption></figure>

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

```jsx
let number = 0;

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

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

{% embed url="<https://codepen.io/hiphop5782/pen/bGKGErR>" %}

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

```jsx
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);
```

{% embed url="<https://codepen.io/hiphop5782/pen/MWXWKEB>" %}

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

```jsx
let number = 0;

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

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

{% embed url="<https://codepen.io/hiphop5782/pen/BaVajmR>" %}

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

## 디지털 시계 만들기

```jsx
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);
```

{% embed url="<https://codepen.io/hiphop5782/pen/VwdweyL>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sysout.co.kr/web/develop-page/js/reactjs/cdn/render.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.