동백 // 노마드 코더 React JS: The Basic Of React

2021. 11. 15. 14:14ㆍ강의 정리/노마드코더( ReactJS 강의 )

반응형

출처 : https://nomadcoders.co/

오류를 고친 사이트 : https://stackoverflow.com/questions/64097973/uncaught-error-minified-react-error-200

Introduction

 

핵심 : React JS의 기초를 알아본다.

 

 

. 뭔가를 배우는데, 이것이 어떤 문제를 해결하는지, 해결하려는 문제를 직접 겪어보며 이해를 해야한다.

그렇지않으면 우리는 어려움을 느끼고, 재미를 느끼지 못할 것이다.

 

. React JS는 우리의 웹사이트에 간단하게 상호작용을 만들어준다.

 

. 강의에서는 앞으로 바닐라 JS와 React JS를 비교하고, 왜 React JS가 더 좋은지를 설명해주실것임!!!

 

 

 

 

Before React

 

핵심 : React JS의 기초를 알아본다.

 

. 버튼을 클릭하고, 몇번 클릭했는지를 세주는 어플을 만들면서, 바닐라 JS와 React JS의 차이점을 알아볼 것임.

 

 

1. 바닐라 JS에서의 코드

<!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 clicks: 0</span>
    <button id="btn">Click me!!!</button>
</body>
    <script>
        let counter = 0;
        const button = document.querySelector("#btn"); 
        const span = document.querySelector("span");
        function handleClick() {
        counter = counter + 1;
        span.innerText = `Total clicks: ${counter}`;
       }
       button.addEventListener("click",handleClick);
    </script>
</html>

. 바닐라 JS에서의 과정

1. HTML을 만든다.

2. JS에서 가져온다.

3. event를 감지한다.

4. 데이터를 업데이트한다.

 

 

2. React JS에서의 코드

 

. React JS를 설치하기 위해서는 두개의 JS 코드를 import해야 함. ( react, react-dom )

<!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></body>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script></script>
</html>

. React JS는 어플리케이션을 interactive하도록 만들어주는 라이브러리이고, react-dom은 라이브러리 또는 패키지인데,  모든 React element들을 HTML body에 둘 수 있도록 해준다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id ="root"></div>
    
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script>
        const root = document.querySelector("#root");
        // span을 만들고, property를 주어준다음, 내부에 들어갈 내용들을 만들어줌.
        const h3 = React.createElement(
            "h3", 
        {
            id:"title",
            onMouseEnter: () => console.log("mouse enter"),       
        }, 
        "Hello I'm a span");
        
        const btn = React.createElement(
            "button", 
        {
            onClick: () => console.log("im clicked"),
            style: {
                backgroundColor:"tomato",
            },
        }, 
        "Click me!!!");
        
        const container = React.createElement("div", null, [h3, btn]);
        
        // render의 의미는 React element를 가지고 HTML로 만들어 배치하겠다는 뜻임.
        // div를 root에 render하는데 그안에 span과 btn을 동시해 render함.
        ReactDOM.render(container, root);
    </script>
</html>

1. createElement하고, HTML 태그를 선택하고, event를 등록한다.

이게 끝이다 ㅋㅋㅋㅋㅋ 매우 단순화되고, 쉬워짐

이것이 React JS의 힘이다.

 

 

 

 

JSX

 

핵심 : React element를 생성하는 더 편리한 방식에 대해서 배운다.

 

. React JS를 사용한다면, 이제는 더이상 addEventListener를 사용할 필요가 없어짐.

onClick: () => console.log("im clicked");

 

 

1. createElement를 대체하는 방법에 대해서 배운다.

 

. 기존의 react에서 element를 만드는 방법

        // span을 만들고, property를 주어준다음, 내부에 들어갈 내용들을 만들어줌.
        const h3 = React.createElement(
            "h3", 
        {
            id:"title",
            onMouseEnter: () => console.log("mouse enter"),       
        }, 
        "Hello I'm a span");

 

 

. JSX는 JS를 확장한 문법이다. 기본적으로 React 요소를 만들게 해주는데, HTML에서 사용한 문법과 흡사한 문법을 사용하기에 매우 간편하다.

 

. JSX를 사용하여 element를 만드는 방법

const Title = (
            <h3 
              id="title" onMouseEnter={() => console.log("mouse enter")}>
                Hello I'm a title
            </h3>
        );
        const Button = (
            <button 
              style={{
                backgroundColor:"tomato",
            }} 
              onClick={() => console.log("im clicked")}
            >
                Click me!!!
            </button>
        );

 

. JSX는 Babel을 이용해 브라우저가 이해할 수 있는 형태로 바꿔주어야 함.

https://babeljs.io/

 

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

 

. 아래의 코드는 위 코드들을 Bable을 통해 변환한 코드들이다.

 

. babel을 Scripts Tag로 추가(설치)한 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <div id ="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/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.querySelector("#root"); // span을 만들고, property를 주어준다음, 내부에 들어갈 내용들을 만들어줌.
        
    const Title = (
        <h3 
            id="title" onMouseEnter={() => console.log("mouse enter")}>
                Hello I'm a title
            </h3>
        );
        const Button = (
            <button 
              style={{
                backgroundColor:"tomato",
            }} 
              onClick={() => console.log("im clicked")}
            >
                Click me!!!
            </button>
        );
        const container = React.createElement("div", null, [Title, Button]);
        
        // render의 의미는 React element를 가지고 HTML로 만들어 배치하겠다는 뜻임.
        // div를 root에 render하는데 그안에 span과 btn을 동시해 render함.
        ReactDOM.render(container, root);
    </script>
</html>

 

. JSX를 좀 풀어서 천천히 설명하면 다음과 같다.

const 변수이름 = (
        <h3 id="ID값" 이벤트={() => 이벤트 발생시 실행문}>Hello I'm a title</h3>
        );
        
위를 HTML 코드와 비교한다면?

<h3 id="title">Hello I'm a title</h3>

 

 

 

 

 

 

JSX part Two

 

핵심 : React element를 생성하는 더 편리한 방식에 대해서 배운다.

 

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

 

. 아래 코드는 위 코드를 JSX를 사용하여 표현한 코드이다.

        // div 태그를 랜더링하고 있는 컴포넌트가 Title과 Button에 관련된 코드를 포함시키고 있음.
        // 컴포넌트의 첫글자는 반드시 대문자이어야 한다. 소문자이면 HTML 태그라고 인식이 된다.
        const container = (
            <div>
                <Title />
                <Button />
            </div>   
        );
        // render의 의미는 React element를 가지고 HTML로 만들어 배치하겠다는 뜻임.
        // div를 root에 render하는데 그안에 span과 btn을 동시해 render함.
        ReactDOM.render(container, root);

. 컴포넌트를 다른 곳에 포함시키거나 사용시키기 위해서는 함수로 만들어주어야한다.

ex) const Title = ()를  contst Title = () => ()로 바꿔준다.

= () => ()의 의미는 function하고 괄호를 연다음 return해주는 것과 같은 의미이다.

 

. 직접 만든 컴포넌트를 렌더링해서 다른곳에서 사용할 때는 항상 대문자로 시작해야한다.

그렇지않으면 HTML tag로 인식이 된다.

 

 

 

. 오늘 최종 코드

https://github.com/yardyard/nomadcoderReactJS/blob/master/index.html

반응형

'강의 정리 > 노마드코더( ReactJS 강의 )' 카테고리의 다른 글

동백 // 노마드 코더 React JS: EFFECTS  (0) 2021.11.23
동백 // 노마드 코더 React JS: Create React App  (0) 2021.11.22
동백 // 노마드 코더 React JS: Props  (0) 2021.11.22
동백 // 노마드 코더 React JS: STATE  (0) 2021.11.17
동백 // 노마드 코더 ReactJS intro  (0) 2021.11.15

관련글

댓글 0

티스토리툴바