[ReactJS로 영화 웹 서비스 만들기] Basics of React

course/nomadcoder

[ReactJS로 영화 웹 서비스 만들기] Basics of React

hjkim0502 2021. 11. 9. 22:16

react는 우리의 서비스를 interactive 하게 만들어주기 위해 만들어졌다
reactjs는 거의 js로 이루어져 있으며, vanillajs 의 문제점을 많이 해결해준다
- 따라서 vanilla로 불편함을 알고 react를 쓰는 것과 그냥 react부터 달려드는 것은 다르다

vanillajs 로 버튼 클릭 수 화면에 띄우기

<!DOCTYPE html>
<html lang="en">

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

react로 같은 기능 만들기

react에서는 script 안에서 element를 만들어 interactive하게 함
어려운 방법, 쉬운 방법이 있는데 어려운 것부터 배워서 react의 본질을 깨우친다

<!DOCTYPE html>
<html lang="en">

<body>
    <!-- 위치 지정하기 위해 적는 유일한 html 코드 -->
    <div id="root"></div>
</body>
<!-- import React -->
<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')
    // argument: 태그 이름, property, 내용
    const span = React.createElement('span', { id: 'sexy-span', style: { color: 'red' } }, "i'm a span")
    // 만든 span을 root에 배치하고 그려준다
    ReactDOM.render(span, root)
</script>

</html>

지금까지는 html에서 만든 것을 js에서 가져와서 업데이트 했다면, react에서는 js에서 만들고 업데이트 가능

<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- 위치 지정하기 위해 적는 유일한 html 코드 -->
    <div id="root"></div>
  </body>
  <!-- import React -->
  <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");
    // argument: 태그 이름, property, 내용
    const h3 = React.createElement(
      "h3",
      {
        onMouseEnter: () => console.log("mouse enter"),
      },
      "i'm a span"
    );
    const btn = React.createElement(
      "button",
      {
        onClick: () => console.log("i am clicked"),
      },
      "click me"
    );
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);
  </script>
</html>

property에 addEventlistener 대신하는 정보 입력 가능
property 중 html에서 보일 내용과 안보일 내용을 알아서 구분함
container에 h3, btn 리스트 형태로 넣고 그린다

<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- 위치 지정하기 위해 적는 유일한 html 코드 -->
    <div id="root"></div>
  </body>
  <!-- import React -->
  <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>
  <!-- import Babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  <script type="text/babel">
    const root = document.getElementById("root");
    // argument: 태그 이름, property, 내용
    // const h3 = React.createElement(
    //   "h3",
    //   {
    //     onMouseEnter: () => console.log("mouse enter"),
    //   },
    //   "i'm a span"
    // );
    // const btn = React.createElement(
    //   "button",
    //   {
    //     onClick: () => console.log("i am clicked"),
    //     style: {
    //     backgroundColor: 'tomato'
    //     }
    //   },
    //   "click me"
    // );
    const Title = (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        i'm a title
      </h3>
    );
    const Button = (
      <button
        style={{ backgroundColor: "tomato" }}
        onClick={() => console.log("i am clicked")}
      >
        click me
      </button>
    );
    const container = React.createElement("div", null, [Title, Button]);
    ReactDOM.render(container, root);
  </script>
</html>

jsx 이용하여 더 쉽게 코딩

브라우저는 jsx 이해하지 못하므로 Babel transformer 설치하고 script type도 설정
- 위 방법은 느리지만, 배우는 단계이기에 이 방식으로 공부함

    const Title = () => (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        i'm a title
      </h3>
    );
    const Button = () => (
      <button
        style={{ backgroundColor: "tomato" }}
        onClick={() => console.log("i am clicked")}
      >
        click me
      </button>
    );
    // const container = React.createElement("div", null, [Title, Button]);
    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container/>, root);

Title, Button 함수여야 Container에 들어갈 수 있고 재사용 가능, 대문자로 시작해야 내가 만든 것으로 인식
Container도 함수로 만들어 render안에 넣음

저작자표시 비영리 (새창열림)