JSX와 Elements, 리액트로 시계 만들기

October 08, 2022 #React  

리액트 기초에서 Component와 props, State는 정리한 적이 있는데 JSX와 Element에 대해서는 정리한 적이 없어 먼저 이론을 확실하게 이해하고 넘어가고자 한다.

JSX란?

JavaScript Syntax Extension의 약자로 JavaScript XML이라고도 불린다. 쉽게 말해 JSX는 자바스크립트와 HTML이 결합된 것이라고 할 수 있다. 브라우저 실행 전, 바벨(Babel)이 JSX로 작성된 코드를 자바스크립트 코드로 변환한다.
그럼 왜 자바스크립트가 아닌 JSX를 사용하는 것일까?
리액트에서 자바스크립트 문법 그대로 사용해 HTML을 생성할 경우, 가독성이 좋지 않고 코드가 길어지기 때문에 대부분 JSX를 이용하여 코드를 작성한다.

Elements란?

Elements are the smallest building blocks of React apps.
리액트 앱에서 가장 작은 구성 요소를 말한다.

Let’s say there is a < div > somewhere in your HTML file:
HTML 파일 어딘가에 < div > 가 있다고 했을 때,

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

We call this a “root” DOM node because everything inside it will be managed by React DOM.
리액트 돔이 이 안에 있는 모든 것들을 관리하기 때문에 이걸 “루트” 돔 노드라고 부른다.

To render a React element, first pass the DOM element to ReactDOM.createRoot(), then pass the React element to root.render():
리액트 엘리먼트를 렌더링하기 위해서는 우선 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, 리액트 엘리먼트를 root.render()에 전달해야 한다.

React elements are immutable. Once you create an element, you can’t change its children or attributes.
리액트 엘리먼트는 불변한다. 엘리먼트를 만들면 엘리먼트의 자식이나 속성을 변경할 수 없다.

-출처

강의를 듣고 추가적으로 공식 문서를 찾아본 다음, 리액트로 시계를 만드는 연습을 했다.

import { useEffect, useState } from "react";

function Clock() {
    const [clock, setClock] = useState(new Date());

    useEffect(()=> {
        const time = setInterval(() => {
            setClock(new Date());
        }, 1000);
        return(() => clearInterval(time));
    }, []);

    return (
        <div>
            <h1>시계</h1>
            <p>{clock.toLocaleTimeString()}</p>
        </div>
    );
}

export default Clock;

자바스크립트에서는 항상 getHours나 getMinutes 등을 사용했는데, 리액트로 시계를 만들면서 toLocaleTimeString()을 처음 알았다😂 지금이라도 알게 되어 다행이다.