Computer Science/FrontEnd

노마드 코더 ReactJS | #2 The Basics of React

토마토. 2022. 2. 26. 12:50

#2.0 Introduction

ReactJS는 어떤 문제를 해결하기 위해 만들어졌는가?

ReactJS는 UI를 interactive하게 만들어준다. 

 

- 예를 들기 위해 바닐라JS를 이용한 프로그램을 만들 것

- ReactJS는 매우매우매우 간단해짐

 

#2.1 Before React

바닐라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(){
            console.log("I have been clicked");
            counter = counter + 1;
            span.innerText = `Total clicks : ${counter}`;
        }
        button.addEventListener("click", handleClick);

    </script>
</html>

- html 생성

- javascript로 듣기

- html에 반영해주기

이걸 리액트로는 안 해도 된다. 

 

#2.2 Our First React Element

<!DOCTYPE html>
<html>
    <body></body>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script></script>
</html>

React.. 설치 없이 불러오면 되는 거였다 ㄷㄷ

=> React 의 규칙 1. html 코드를 직접 작성하지 않는다. 

 

- 리액트는 어플리케이션을 interactive하게 만들어주는 library

- react-dom은 react element를 html에 둘 수 있게 해주는 library

 

<!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>
        // root에 접근
        const root = document.getElementById("root");

        //span element를 만들어줌 
        const span = React.createElement(
            "span", // html tag
            {id:"sexy-span", style:{color:"red"}}, //properties id, style, etc..
            "Hi I am a span" // text
        ); 
        // 페이지에 위치시키기
        ReactDOM.render(span, root);



    </script>
</html>

 

=> 모든 것이 자바스크립트에서 출발한다.

ReactJS를 이용해서 element를 생성

업데이트도 훨씬 쉬워진다. 

 

#2.3 Events in React

=> div, button, h3 생성

<!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>
        // root에 접근
        const root = document.getElementById("root");

        //span element를 만들어줌 
        const span = React.createElement(
            "h3", // html tag
            {id:"sexy-span", style:{color:"red"}}, //properties id, style, etc..
            "Hi I am a span" // text
        ); 

        const btn = React.createElement("button", null, "click me");

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

        ReactDOM.render(container, root);
        // 페이지에 위치시키기
    </script>
</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>
        // root에 접근
        const root = document.getElementById("root");

        //span element를 만들어줌 
        const span = React.createElement(
            "h3", // html tag
            {id:"sexy-span", style:{color:"red"}}, //properties id, style, etc..
            "Hi I am a span" // text
        ); 

        const btn = React.createElement("button", {
            //버튼에 event listener 주기
            onClick: () => console.log("Clicked"),
            onmouseenter: () => console.log("mouse enter"),
            style : {
                backgroundColor : "tomato",
            }
        }, "click me");

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

        ReactDOM.render(container, root);
        // 페이지에 위치시키기
    </script>
</html>

=> 진짜 짱이네..

 

#2.4 Recap

- ReactJS, ReactDom 불러오기

- createElement(tag, property, text)

- property에서 모~든 걸 할 수 있다. 

 

#2.5 JSX

jsx는 JavaScript를 확장한 문법

HTML와 비슷한 방식으로 React element 생성 가능함

 

<!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>
        // root에 접근
        const root = document.getElementById("root");

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

        const Button = <button style={{backgroundColor:"tomato",}}>
            Click me
        </button>

        ReactDOM.render(container, root);
        // 페이지에 위치시키기
    </script>
</html>

 

Babel을 이용해서 jsx를 react.어쩌구로 변환해준다. (브라우저가 이해할 수 있도록)

babel 

<!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">
        // root에 접근
        const root = document.getElementById("root");

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

        const Button = <button style={{backgroundColor:"tomato",}}>
            Click me
        </button>

        const container = React.createElement("div", null, [Title, Button]);
        ReactDOM.render(container, root);
        // 페이지에 위치시키기
    </script>
</html>

 

#2.6 JSX part two

마지막 rendering을 JSX를 사용해서 하는 방법

div 사이에 function을 넣어주어야 한다. 

기존에 생성한 버튼과 타이틀을 함수로 변경해주기!

<!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">
        // root에 접근
        const root = document.getElementById("root");

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

        const Button = () => { 
            return ( 
                <button style={{backgroundColor:"tomato",}}>
                    Click me
                </button>
            )};

        const Container = <div>
            <Title/>
            <Button/>
        </div>
        ReactDOM.render(Container, root);
        // 페이지에 위치시키기
    </script>
</html>

우와앙아앙

컴포넌트의 첫 글자는 대문자로 설정해야 함

 

'Computer Science > FrontEnd' 카테고리의 다른 글

노마드코더 ReactJS | #3 State  (0) 2022.04.12
노마드 코더 ReactJS | #3 State  (0) 2022.02.26
노마드 코더 ReactJS | #1 Introduction  (0) 2022.02.26
노마드 코더 JS | #8 Weather  (0) 2022.02.25
노마드 코더 JS | #7 To Do List  (0) 2022.02.25

'Computer Science/FrontEnd'의 다른글

  • 현재글노마드 코더 ReactJS | #2 The Basics of React

관련글

티스토리툴바