ReactJS로 영화 웹 서비스 만들기 : Chapter 2

잉퓨·2023년 4월 9일

nomadcoders : ReactJS로 영화 웹 서비스 만들기

목록 보기

1/4

Before React

<!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.innerText = `Total clicks: ${counter}`;
        }
        button.addEventListener("click",handleClick);
    </script>
</html>

⇒ Button을 클릭할 때 마다 클릭 수가 올라가는 바닐라JS 코드 작성

HTML 제작
JS에서 갖고오기
event 감지
데이터 및 HTML 데이터 업데이트하기

⇒ 해당 과정은 복잡하다!

리액트 적용하기

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

⇒ 콘솔에서 리액트가 동작하는 것을 확인할 수 있다!

Our First React Element

const span = React.createElement("span");

⇒ creatElement 안에 들어오는 내용은 html에서 사용한 내용과 동일해야 한다.

React-dom → React element를 HTML에 두는 역할을 한다.
- span을 따로 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 root = document.getElementById("root");
        const span = React.createElement("span");
        ReactDOM.render(span,root)
    </script>
</html>

render() → React element를 갖고 HTML로 만들어 배치
결과적으로 element를 만들고, root 안에 span을 React를 이용해 넣게 되었다.

const root = document.getElementById("root");
const span = React.createElement("span",{id : "sexy-span"});
ReactDOM.render(span,root)

⇒ id를 지정해서 만들 수 있다 ! → 하지만 이것은 안쓰는 방식.. 본 강의에서만 할것!

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

⇒ 속성을 줄 수 있고, style과 같은 태그를 지정하는 것 또한 가능하다.

즉, React는 HTML의 내용을 만들고 찾아서 갖고오는 것이 아닌, React 내에서 업데이트를 하는 것이 가능하다!

Events in React

본 챕터에서는 버튼을 만들고, 이벤트를 React에서 어떻게 다루는지에 대해 알아보고자 한다.

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

⇒ Click me 라는 버튼을 생성하였다.

const root = document.getElementById("root");
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)

⇒ 위와 같이 두개를 넣는 것 또한 가능하다 → 2개의 component를 갖는 것을 생성하게 된다.

const root = document.getElementById("root");
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");
const container = React.createElement("div",null, [h3,btn]);
ReactDOM.render(container,root)

on + Event → eventlistner를 생성한다는 것을 알려주는 도구이다.
갖고올 필요가 없이 createElement 후 event를 위와 같이 등록하면 된다.
- addEventListener 대신, create 하여 event를 등록하는 방식으로 기억하자.

JSX

createElement를 대체할 수 있는 방식에 대해 다뤄보고자 한다.

JSX → JavaScript를 확장한 문법
- React 요소를 만들 수 있게 해준다.
- HTML과 유사한 요소를 사용한다.

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

⇒ 기존의 mouseEnter 내용을 위처럼 JSX 문법을 사용해서 적을 수 .

const Button = (
	<Button
	   style ={
	     {
	        backgroundColor = "tomato",
       }
    }
    onClick={()=>console.log("im clicked")}
    >
	     Click me!
 </Button>
);

JSX 코드를 작성하기 위해 추가 사항

<script src = "https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type ="text/babel">

기존의 코드를 함수로 변형

const Button = () =>

() ⇒ 를 넣어 함수의 형태로 변경할 수 있다.

const container =(
        <div>
            <Title />
            <Button />
        </div>
    );

기존 컨테이너의 내용을 위와 같이 표현할 수 있다.

주의점 → Upper case로 적어야 HTML 태그가 아닌, JSX로 인식이 가능하다.
Title, Button 위치에는, 해당하는 함수의 JSX가 왔다는 형태로 인지할 수 있다.

Trouble Shooting

무한 로딩..! 버그가 생겼다.

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">

리액트 관련된 버전을 맞추어주었다

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

    const Button = () => {
    return (
      <button style={{ backgroundColor: "tomato" }} onClick={() => console.log("im clicked")}>
        Click me
      </button>
      )
    };