[노마드코더] 바닐라JS 와 비교 및 리액트 기초 문법

Javascript

by 래모 2022. 1. 26. 00:22

일단 간단하게 바닐라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 = counter + 1;
            span.innerHTML = `Total clicks : ${counter}`;
        }
        button.addEventListener("click", handleClick);
    </script>
</html>

React JS 설치를 위한 Javascript 코드 Url
https://unpkg.com/react@17.0.2/umd/react.production.min.js
https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js

리액트를 import했기 때문에 createElement function을 가진 리액트 object에 접근 가능
const span 그러나 createElement(“span”) 은 반드시 생성하고자 하는 HTML 태그와 똑같아야함

React JS : 어플리케이션이 아주 인터랙티브하도록 만들어주는 library. 엔진과 같다.
React-dom : library 또는 package. 모든 react element들을 HTML body에 둘 수 있도록 해줌.

~어려운 방식(이런거 잘 안 씀 걍 비교를 위해서 보여주는 듯)~

ReactDOM.render()

render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것. 즉, 사용자에게 보여준다는 의미
ReactDOM.render(span, span이 가야할 위치)
-> 그래서 보통 body에 id=“root” 만들어서 span을 root 안에 두라고 함

React.createElement()

React.createElement("span", {span의 property}, “span의 내용”)
-> property는 class name, id도 가능 style도 가능
-> 참고만 하고 외우지 말기. 이렇게 쓸 일 없음

바닐라JS는 HTML -> JS 순서
리액트는 JS -> HTML 순서

JS가 element를 생성하고 React JS가 그것을 HTML로 번역하는 것
React JS는 업데이트 해야 하는 HTML을 업데이트 할 수 있음

두 가지 const를 render 하고 싶은 경우 div를 만든다
그리고 React.createElement("div", null, [span, btn]); 와 같이 배열을 만들어서 const를 넣어준다.

property에 eventListener 넣는 것도 가능.
클릭 : {onClick: () => console.log("I'm clicked")}
마우스엔터 : {onMouseEnter: () => console.log("mouse enter")}

<!DOCTYPE html>
<html>
    <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 h3 = React.createElement(
            "h3", 
            {onMouseEnter: () => console.log("mouse enter")},
            "Hello I'm a h3");
        const btn = React.createElement("button", {onClick: () => console.log("I'm clicked")}, "Click me");
        const container = React.createElement("div", null, [h3, btn]);
        ReactDOM.render(container, root);
    </script>
</html>

~ 좀 더 편리한 방법(createElement를 안 쓰는 방법) ~

JSX – 자바스크립트를 확장한 문법

보통의 HTML과 비슷. 그러나 property를 HTML 태그의 속성처럼 적으면 됨
const Title = (
console.log("mouse enter")}>
Hello I'm a span
);

style={{ backgroundColor: "tomato" }} -> 스타일은 {} 2개임

JSX를 브라우저가 온전히 이해하지 못하므로 이해할 수 있게
https://unpkg.com/@babel/standalone/babel.min.js 를 설치해야함
-> JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔줌
바벨을 가져온 뒤 script type="text/babel"로 적어줘야 인식함

div에 const 넣기 위해선

const를 함수로 만들어 줘야함 const Btn = () => ( );
-> arrow function 이라고 부름
const Btn = () => ( ); 는 function Btn() { return ( ); } 와 같음
HTML 태그처럼 만들어서 넣어줌
(중요) 컴포넌트의 첫 글자는 반드시 대문자여야 함
-> 우리가 직접 만든 요소는 전부 대문자로 시작해야 함

<!DOCTYPE html>
<html>
    <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/babel.min.js"></script>
    <script type = "text/babel">
        const root = document.getElementById("root");
        function Title () {
            return  (
                <h3 id = "title" onMouseEnter={() => console.log("mouse enter")}>
                    Hello I'm a title
                </h3>
            );
        } 
    
        const Button = () => (
            <button style = {{backgroundColor: "tomato"}}
            onClick = {() => console.log("i'm clicked")}
         >
            Click me
         </button>
         );

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

'Javascript' 카테고리의 다른 글

[노마드코더] 바닐라JS 공부 8일차 (Weather) (0)	2022.01.17
[노마드코더] 바닐라JS 공부 7일차(To Do List) (0)	2022.01.15
[노마드코더] 바닐라JS 공부 6일차(Quotes and Background: Math객체 난수) (0)	2022.01.11
[노마드코더] 바닐라JS 공부 5일차(clock :setInterval, setTimeout, Date 객체, padStart) (0)	2022.01.11
[노마드코더] 바닐라JS 공부 4일차(Login 구현:preventDefault, localStorage) (0)	2022.01.04