Post

[React-zerocho] 섹션 1. 구구단(1)

[웹 게임을 만들며 배우는 React] https://www.inflearn.com/course/web-game-react

Posted
By Cheong seolmo
2 min read
[React-zerocho] 섹션 1. 구구단(1)

ZeroCho/react-webgame

1.리액트를 왜 쓰는가

  • single page application: 웹 앱. 기능적으로 많은 것을 제공
    • 전통적인 백엔드(jQuery 등) 방식으로 구현하기 복잡함. 데이터와 화면의 일치 등. > signle page application을 위한 프레임워크 각광.

2. 강의 수강 시 주의할 점

  • 리액트는 자바스크립트
  • 자바스크립트로만 구성되어 검색 엔진 노출에 어려움(구글은 괜찮, 네이버나 다음은 잘 분석하지 못함)
  • HTML/CSS/JS 공부는 꾸준히

3. 첫 리액트 컴포넌트(아직은 Class)

  • React / React DOM 불러오기 (버전 18)
    1
2
3
4
5
6
7

      <!-- 개발용 -->
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    
  <!-- 실무용 -->
  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

  • like-button.html

    • 리액트는 데이터 중심. 데이터가 바뀌면 화면이 바뀐다
      • component: 데이터와 화면을 한 덩어리로 묶어줌. 재사용 가능한 독립된 모듈.
        • state: 데이터 / render()의 return: 화면

4. 가독성을 위한 JSX(XML임!)

  • JSX 문법: Javascript + XML(html 친구)
  • babel 추가: 코드를 자바스크립트로 변환 시켜주는 라이브러리
    1
2
3

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

  <script type="text/babel"></script>
  • like-button-jsx.html
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

      <html>
  <head>
  </head>
  <body>
  <div id="root"></div>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!--<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>-->
  <!--<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>-->
  <script type="text/babel">
      'use strict';

      class LikeButton extends React.Component {
          constructor(props) {
          super(props);
          this.state = {liked: false};
          }

          render() {
          if (this.state.liked) {
              return 'You liked this.';
          }

          return (
              <button onClick={() => this.setState({liked: true})}>
              Like
              </button>
          );
          }
      }
  </script>
  <script type="text/babel">
      const root = ReactDOM.createRoot(document.querySelector('#root'));
      root.render(e(LikeButton));
  </script>
  </body>
  </html>
  • return에는 태그 하나만 허용. 형제태그 여러개는 큰 태그 하나에 묶어 넣어야 함.
  • 컴포넌트 여러 번 사용 가능.
Web, React
lecture
This post is licensed under CC BY 4.0 by the author.