[React] JSX문법 기초 (JS to JSX)

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.
부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!

출처 : https://nomadcoders.co/react-for-beginners

버튼 클릭 시 카운터가 올라가는 코드를 짜보겠습니다.

보통 html, js 이용해서 짜라고 하면 다음과 같이 짤겁니다.

1. js 문법의 버튼 클릭 시 카운터 증가

<!DOCTYPE html>
<html>
    <body>
        <span> Total clicks: 0</span>
        <button id="btn">Click me</button>
    </body>
    <script>
        let counter = 0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");

        function handleClick() {
            counter += 1;
            span.textContent = ` Total clicks: ${counter}`;
        }
        button.addEventListener("click", handleClick);
    </script>
</html>

버튼을 클릭하면 이미지처럼 카운트가 아주 잘 됩니다. 개발자도구로 자세히 보면, 버튼 클릭시 span 자체가 다시 랜더링 되는 것을 확인 할 수 있습니다.

2. React js, Dom을 이용하여 createElement 사용

다음은 React를 이용해서 작성해보겠습니다.

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <!--React js, DOM install-->
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <!--interactivity 원동력 -->
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <!--react element to html -->
    <script>
        const root = document.getElementById("root");

        const h3 = React.createElement("h3", {
            id:"title",
            onMouseEnter: () => console.log("Mouse entered the h3!"),
        }, "Hello, I'm h3 element");
        const btn = React.createElement("button", {
            onClick: () => console.log("Button clicked!"),
            style: {
                backgroundColor: "tomato"
            }
        }, "Click me");

        // h3, btn rendering
        const container = React.createElement("div", null, [h3, btn]);
        ReactDOM.render(container, root);
        
    </script>
</html>

우선, react js와 react dom 문법을 사용하기 위해 import를 먼저 해주어야합니다.

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <!--interactivity 원동력 -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <!--react element to html -->

그 다음 React.createElement를 통해서

사용할 태그명, 옵션 ex) id, style, event listener 등, title를 작성해줍니다.

그 후, ReactDOM.render를 통해서 만들어둔 요소를 화면에 표출시켜줍니다.

참고로, createElement 사용 시 다음처럼 배열을 이용하여 여러개의 요소를 한꺼번에 포함시켜서 만들 수도 있습니다.

const container = React.createElement("div", null, [h3, btn]);

아직 클릭 이벤트는 추가하지 않았지만, 리액트를 이용하여 필요한 요소들을 만들어보았습니다.

3. JSX 문법 사용

- JSX(JavaScript XML)는 React에서 UI 구조를 기술하기 위해 자바스크립트 내부에 HTML과 유사한 마크업을 작성할 수 있게 해주는 확장 문법

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <!--React js, DOM install-->
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <!--interactivity 원동력 -->
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <!--react element to html -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!--JSX to JS-->
    <script type="text/babel">
        const root = document.getElementById("root");

        // JSX 사용
        const Title = (
            <h3 id="title" onMouseEnter={() => console.log("Mouse entered the h3!")}>
                Hello, I'm h3 element
            </h3>
        );

        const Button = (
            <button 
                onClick={() => console.log("Button clicked!")}
                style={{ backgroundColor: "tomato" }}
            >
                Click me
            </button>
        )

        // h3, btn rendering
        const container = React.createElement("div", null, [Title, Button]);
        ReactDOM.render(container, root);
        
    </script>
</html>

2번째에 작성한 코드에 비해 훨씬 직관적으로 코드를 짤 수 있게 되었습니다.

JSX를 JS로 변경해주기 위해 아래 babel를 import해주고, script문의 type도 지정해줍니다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!--JSX to JS-->
<script type="text/babel">

그러면 아까와 같은 페이지를 JSX문법으로 만들 수 있게 됩니다.

그리고 소스를 보면, 맨 위에 babel을 통해 Jsx문법이 js로 변경된 것도 확인 할 수 있습니다.

4. JSX 태그 사용

조금만 더 JSX문법을 배워보자면,

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <!--React js, DOM install-->
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <!--interactivity 원동력 -->
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <!--react element to html -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!--JSX to JS-->
    <script type="text/babel">
        const root = document.getElementById("root");

        // JSX 사용
        const Title = () =>(
            <h3 id="title" onMouseEnter={() => console.log("Mouse entered the h3!")}>
                Hello, I'm Title
            </h3>
        );

        const Button = () => (
            <button 
                onClick={() => console.log("Button clicked!")}
                style={{ backgroundColor: "tomato" }}
            >
                Click me
            </button>
        )

        // h3, btn rendering
        const Container = () =>(
            <div>
                <Title/> <Button/>
            </div>
        );
        ReactDOM.render(<Container/>, root);
        
    </script>
</html>

기존의 요소를 화살표 함수를 이용하고,

const Title = (
    <h3 id="title" onMouseEnter={() => console.log("Mouse entered the h3!")}>
        Hello, I'm h3 element
    </h3>
);

const Title = () =>(
    <h3 id="title" onMouseEnter={() => console.log("Mouse entered the h3!")}>
        Hello, I'm Title
    </h3>
);

다양한 요소를 포함시킨 컨테이너도 직관적으로 JSX문법으로 만들 수 있습니다.

여기서 주의할점은 사용자가 커스텀으로 만든 태그 변수이기 때문에 첫 글자는 대문자로 해주어야합니다.

const container = React.createElement("div", null, [Title, Button]);

// h3, btn rendering
const Container = () =>(
    <div>
        <Title/> <Button/>
    </div>
);

다음 글에서는 이제 이벤트를 적용시켜보겠습니다.

[React] 컴포넌트 state (React.useState(), setState)

읽어주셔서 감사합니다.

'Frontend > React' 카테고리의 다른 글

[React] Divide : 작은 컴포넌트로 분할 - 단위변환기 3 (0)	2026.02.07
[React] 분 <-> 시, 리셋기능 - 단위변환기2 (0)	2026.02.03
[React] input state () - 단위변환기1 Warning : Invalid DOM property (0)	2026.02.02
[React] State Functions (state 값 설정 방법 2가지) (0)	2026.02.02
[React] 컴포넌트 state (React.useState(), setState) (0)	2026.01.30

1. js 문법의 버튼 클릭 시 카운터 증가

2. React js, Dom을 이용하여 createElement 사용

3. JSX 문법 사용

4. JSX 태그 사용

'Frontend > React' 카테고리의 다른 글

티스토리툴바