TIL 20231222

728x90

이번 주 목표

ReactJS로 영화 웹 서비스 만들기 완강

오늘 목표

ReactJS로 영화 웹 서비스 만들기

#2 [2021 UPDATE] THE BASICS OF REACT

#3 [2021 UPDATE] STATE

#4 [2021 UPDATE] PROPS

#5 [2021 UPDATE] CREATE REACT APP

오늘 한 것

ReactJS로 영화 웹 서비스 만들기

#2 [2021 UPDATE] THE BASICS OF REACT

#3 [2021 UPDATE] STATE

1. jsx

jsx는 리액트 요소를 만들어주는 문법

HTML과 유사한 문법

javascript를 확장한 문법

jsx 문법으로 작성한 h3와 button

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

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

jsx는 babel로 변환시켜 준다.

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

script 태그의 타입을 바벨로 바꿔준다.

  <script type="text/babel">

넣고 싶은 Button과 h3를 함수로 바꿔준다.

Container의 div안에 문법에 맞게 넣어준다.

넣을 때 첫 글자는 UpperCase로 써 준다. = 리액트 요소로 인식한다.
lowerCase는 html로 인식한다.

화살표 함수로 쓰면 return을 생략할 수 있다.

<!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 span"
      </h3>
    );

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

    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>

2. state

X : state를 이용하지 않고 render를 한 번 클릭할 때마다 해서 UI 업데이트

<!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");
    let counter = 0;
    function countUp() {
      counter = counter + 1;
      ReactDOM.render(<Container />, root);
    }
    const Container = () => (
      <div>
        <h3>Total clicks : {counter}</h3>
        <button onClick={countUp}>Click me</button>
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>

O : useState를 이용해 변경하기

<!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 App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      };
      return (
        <div>
          <h3>Total clicks : {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      };
      return (
        <div>
          <h3>Total clicks : {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

KPT

Keep

하려고 하는 것

Problem

체력이 부족한 것

Try

파이팅....

소감

체력이 확실히 떨어졌다는 것을 느낀다.

전에는 9시부터 9시까지 공부만 해도 괜찮았었는데

7시 30분인데 벌써 지친다.

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

TIL 20231226 (2)	2023.12.26
TIL 20231224 (0)	2023.12.24
TIL 20231221 (2)	2023.12.22
TIL 20231204 (3)	2023.12.04
TIL 20231203 (0)	2023.12.03