[노마드코더] React JS Ch.1~2

김서윤·2024년 1월 22일

2023 React web 기록 프론트엔드

[노마드코더] React JS

목록 보기

1/2

#1 INTRODUCTION

1.1 Why React

React JS 자체가 작고, 대부분의 경우 React JS는 그냥 Javascript

1.2 Requirements

바닐라 JS (HTML, CSS, Javascript)

Node JS

브라우저 & Visual Studio Code

#2 THE BASICS OF REACT

2.1 Before React

vanilla.html

<!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>

index.html → bring react src

<!DOCTYPE html>
<html>
  <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>

2.2 Our First React Element

React JS : Interactive한 UI 만들 수 있는 역할

React-dom : React element를 HTML에 두는 역할

주로 사용하지는 않는 방식

index.html → using react hard way

<!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 span = React.createElement("span", { id: "sexy-span", style: { color: "red" } }, "Hello I'm a span");
    ReactDOM.render(span, root);
  </script>
</html>

render : React element를 가지고 HTML로 만들어 배치

2.3 Events in React

주로 사용하지는 않는 방식

index.html → extra about property & eventListener

<!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 span = React.createElement(
      "h3",
      {
        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, [span, btn]);
    ReactDOM.render(container, root);
  </script>
</html>

2.4 Recap

createElement → 사용 X

❗ props 안에서 eventListener 등록 가능

2.5 JSX

createElement를 대체할 코드 → JSX (JavaScript를 확장한 문법)

createElement, 이름, props, 내용 → html 코드와 가깝게

JSX : 브라우저가 이해할 수 있게 변환해주는 Babel(코드 변환 역할) 필요

index.html → using JSX

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

2.6 JSX part Two

❗ Component → 반드시 대문자로 시작

(소문자일 경우 React와 JSX는 HTML 태그라고 생각)

내가 만든 요소 → 전부 대문자로 시작
HTML 요소 → 소문자로 작성

컴포넌트를 다른 컴포넌트에 넣는 방법

index.html → final code with JSX function(함수)로 만드는 방법은 2가지 모두 가능

<!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 h3
        </h3>
      );
    }
    const Button = () => (
      <button style={{ backgroundColor: "tomato" }} onClick={() => console.log("im clicked")}>
        Click me
      </button>
    );
    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>

김서윤

다음 포스트

[노마드코더] React JS Ch.1~2