React.JS) JS VS React.JS - 1. React 요소 만들기

Sep 20, 2024

1. JS로 기본 클릭 이벤트 만들기

버튼 클릭 이벤트 만들기


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">Click me</button>
</body>
<script>
    const button = document.getElementById("btn");
    function handleClick() {
        console.log("클릭했어요~!");
    }
    button.addEventListener("click", handleClick);
</script>
</html>

Resct.JS로 만들어보기

2. React와 ReactDOM 라이브러리를 웹 페이지에 추가하기


<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>


<!DOCTYPE html>
<html lang="en">
<body></body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<script></script>
</html>

HTML 요소 추가하기

JS와 달리 HTML을 페이지에 직접 작성하지 않음

3. Span 추가하기

span 요소 추가하기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<script>
    const root = document.getElementById("root");
    const span = React.createElement("span");
    ReactDom.render(span, root)
</script>
</html>

span 요소에 id 추가하기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<script>
    // root 요소를 가져오기
    const root = document.getElementById("root");

    // React 요소(span)를 생성하기
    const span = React.createElement("span", {id : "span"});

    // ReactDOM을 사용하여 React 요소를 root에 렌더링하기
    ReactDOM.render(span, root);
</script>
</html>

span의 내용 추가하기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<script>
    // root 요소를 가져오기
    const root = document.getElementById("root");

    // React 요소(span)를 생성하기
    const span = React.createElement(
        "span", 
        {id : "span"}, 
        "Hello");

    // ReactDOM을 사용하여 React 요소를 root에 렌더링하기
    ReactDOM.render(span, root);
</script>
</html>

span의 스타일 적용하기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<script>
    // root 요소를 가져오기
    const root = document.getElementById("root");

    // React 요소(span)를 생성하기
    const span = React.createElement(
        "span", 
        {
            id: "span",
            style: { color: "orange" } // style을 props 객체에 포함
        }, 
        "Hello"
    );

    // ReactDOM을 사용하여 React 요소를 root에 렌더링하기
    ReactDOM.render(span, root);
</script>
</html

4. button 추가하기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<script>
    // root 요소를 가져오기
    const root = document.getElementById("root");

    // React 요소 생성하기
    const span = React.createElement("span", null, "Hello");
    const btn = React.createElement("button", null, "Click me!");

    // ReactDOM을 사용하여 React 요소를 렌더링하기
    ReactDOM.render(btn, root);
</script>
</html>

5. 둘 다 랜더링하고 싶을 때


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<script>
    // root 요소를 가져오기
    const root = document.getElementById("root");

    // React 요소 생성하기
    const span = React.createElement("span", null, "Hello");
    const btn = React.createElement("button", null, "Click me!");

    // 부모 div로 두 요소를 감싸기
    const container = React.createElement("div", null, [span, btn]);

    // ReactDOM을 사용하여 React 요소를 렌더링하기
    ReactDOM.render(container, root);
</script>
</html>

span을 h3로 변경


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<script>
    // root 요소를 가져오기
    const root = document.getElementById("root");

    // React 요소 생성하기
    const h3 = React.createElement("h3", null, "Hello");
    const btn = React.createElement("button", null, "Click me!");

    // 부모 div로 두 요소를 감싸기
    const container = React.createElement("div", null, [h3, btn]);

    // ReactDOM을 사용하여 React 요소를 렌더링하기
    ReactDOM.render(container, root);
</script>
</html>

6. 이벤트 추가하기

addEventListener 없이 속성에서 바로 이벤트 등록 가능


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<script>
    // root 요소를 가져오기
    const root = document.getElementById("root");

    // React 요소 생성하기
    const h3 = React.createElement(
        "h3", 
        {
            onMouseEnter: () => console.log("mouse enter")
        }, 
        "Hello");
    const btn = React.createElement(
        "button", 
        {
            onClick: () => console.log("클릭했어요~!")
        },
        "Click me!"
    );

    // 부모 div로 두 요소를 감싸기
    const container = React.createElement("div", null, [h3, btn]);

    // ReactDOM을 사용하여 React 요소를 렌더링하기
    ReactDOM.render(container, root);
</script>
</html>

7. JSX를 사용하여 React 요소 생성하는 방식으로 변경하기

JS를 확장한 것

Babel 추가하기

서버에서 컴파일할 필요 없이 브라우저에서 JSX와 최신 JavaScript 문법을 변환


<script type="text/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel"></script>

span 생성하기


 // React 요소 생성하기
 
    //옛날 방식
    const h3 = React.createElement(
        "h3", 
        {
            onMouseEnter: () => console.log("mouse enter")
        }, 
        "Hello");

    // JSX 사용해서 React 요소 생성하기
    const Title = (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
            Hello
        </h3>
    );

button 생성하기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<script type="text/javascript" src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    // ReactDOM을 사용하여 React 요소를 렌더링하기
    const root = document.getElementById("root");

    // JSX를 사용하여 React 요소 생성하기
    const Title = (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
            Hello
        </h3>
    );
    
    const button = (
        <button style={{backgroundColor: "orange"}} id="btn" onClick={() => console.log("클릭했어요~!")}>
            Click me!
        </button>
    );

    // 부모 div로 두 요소를 감싸기
    const container = (
        <div>
            {Title}
            {button}
        </div>
    );

    ReactDOM.render(container, root);
</script>
</html>

8. 컴포넌트로 정의하여 사용하기

요소를 함수 내에 담아 컴포넌트로 만들면 원하는 만큼 사용할 수 있음


  const Title = () => (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
            Hello
        </h3>
    );


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    // Title 컴포넌트 정의
    function Title() {
        return (
            <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
                Hello
            </h3>
        );
    }
    
    // Button 컴포넌트 정의
    function Button() {
        return (
            <button style={{backgroundColor: "orange"}} id="btn" onClick={() => console.log("클릭했어요~!")}>
                Click me!
            </button>
        );
    }

    // 부모 div로 두 요소를 감싸기
    const container = (
        <div>
            <Title /> 
            <Button />
        </div>
    );
    
    // ReactDOM을 사용하여 React 요소를 렌더링하기
    const root = document.getElementById("root");
    ReactDOM.render(container, root);
</script>
</html>

See more posts

React.JS) JS VS React.JS - 1. React 요소 만들기

1. JS로 기본 클릭 이벤트 만들기

Resct.JS로 만들어보기

2. React와 ReactDOM 라이브러리를 웹 페이지에 추가하기

HTML 요소 추가하기

3. Span 추가하기

4. button 추가하기

5. 둘 다 랜더링하고 싶을 때

6. 이벤트 추가하기

7. JSX를 사용하여 React 요소 생성하는 방식으로 변경하기

8. 컴포넌트로 정의하여 사용하기

More articles

React.JS) React.JS - 3. 시간 계산기 App 만들기

React.JS) JS VS React.JS - 2. React로 상태관리하기

TypeScript) 블록체인 만들기

TypeScript) 직접 패키지 만들어서 사용해보기