TIL 20231221

728x90

이번 주 목표

노마드 코더 - ReactJS로 영화 웹 서비스 만들기 완강

오늘 목표

노마드 코더 - ReactJS로 영화 웹 서비스 만들기

#1 [2021 UPDATE] INTRODUCTION

#2 [2021 UPDATE] THE BASICS OF REACT

오늘 한 것

노마드 코더 - ReactJS로 영화 웹 서비스 만들기

#1 [2021 UPDATE] INTRODUCTION

1. 리액트, 리액트 돔

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

리액트 앱을 만들기 위해서는 이 두 가지 코드를 html에 넣는다.

react : interactive 라이브러리

react-dom : 모든 react element를 HTML Body 에 둘 수 있게 해 준다.

2. React.createElement("HTML태그")

1st argument : HTML tag

const span = React.createElement("span")

실제 개발에서 잘 안 쓰는 방법

어려운 방법

하지만 이해해야 한다.

이렇게만 적으면 body에 span이 보이지 않는다.

ReactDOM.render(넣을 것, 위치);

render : React element를 가지고 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>
    const span = React.createElement("span");
    ReactDOM.render(span, root);
  </script>
</html>

2nd argument : property

id나 class name을 정할 수 있다.

EventListener를 등록할 수 있다.

    const span = React.createElement("span", { id: "sexy-span" });

색도 바꿀 수 있다.

const span = React.createElement(
      "span",
      { id: "sexy-span", style: { color: "red" } },
      "Hello I'm a span"
    );

 const span = React.createElement("span", null, "Hello I'm a span");

필요하지 않은 경우 null 로 표기한다.

EventListener

   const h3 = React.createElement(
      "h3",
      {
        onMouseEnter: () => {
          console.log("mouse enter");
        },
      },
      "Hello I'm a span"
    );
    const btn = React.createElement(
      "button",
      {
        onClick: () => {
          console.log("im clicked");
        },
      },
      "Click me"
    );

3rd argument : content 내용

const span = React.createElement("span", { id: "sexy-span" },"Hello I'm a span");

3. div와 배열을 이용해 두 가지를 한 꺼번에 render

const span = React.createElement("span", null, "Hello I'm a span");
const btn = React.createElement("button", null, "Click me");

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

정리

1. import react & react-dom

2. cerate element with javascript

3. react translate to HTML

KPT

Keep

열심히 하려 하는 것

Problem

잠이 많은 것

Try

자지 않는 시간에 집중

소감

파이팅

'verdantjuly > Today I Learned' 카테고리의 다른 글

TIL 20231224 (0)	2023.12.24
TIL 20231222 (0)	2023.12.22
TIL 20231204 (3)	2023.12.04
TIL 20231203 (0)	2023.12.03
TIL 20231125 (2)	2023.11.25