🐱 #1. React.js

박준석·2022년 10월 13일

React

목록 보기

1/13

오늘은 리액트를 시작한다.

리액트를 시작하기에 앞서 script src를 임포트 시켜야 한다. 임포트 방법은 아래와 같다.

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

React란?

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 Javascript 라이브러리이다. "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.

예를 들어 javascipt로 작성한 코드를 React로 바꿔 작성해보겠다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>Total Click : 0</span>
    <button id="btn">Click ME</button>

    <script>
        let counter =0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");
        function handleClick(){
            counter += 1;
            span.innerText = `Total Click : ${counter}`;
        }
        
        button.addEventListener("click", handleClick);
    </script>
</body>
</html>

버튼을 클릭할 때 마다 숫자가 증가하는 프로그램을 구현했다. 이 것을 React로 바꾸면 더 간단하게 작성이 가능하고 굳이 HTML에 태그를 작성하지 않아도 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script>
        const root = document.getElementById("root");
        const h3 = React.createElement("h3", {
            id : "title",
            onMouseEnter:() => console.log("mouseenter")
        }, 
            "Hello i'm a span"
            );
        const btn = React.createElement("button",{
            onClick:() => console.log("im click"),
            style : {backgroundColor : "tomato"}
        },
        "Click Me");
        const container = React.createElement("div", null, [h3, btn])

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

React.createElement("태그", {id,class생성, addEventListener, style}, "출력할 문장, 배열") 한줄로 가능하다.

그리고 ReactDOM.render(container, root);으로 출력하고 싶은 것을 render 한다.

이런 방법은 개발자들은 잘 쓰지않지만 기초를 알기 위해 위와 같은 방식으로 작성한다.

박준석

안녕하세요 프론트엔드 개발자입니다. 글을 이전 중입니다.

다음 포스트

🐱 #1. React.js

React

🐱 #2. React.js - JSX

0개의 댓글