[study] 제로초 리액트 기본강좌 1-2 첫 리액트 컴포넌트 - 회복맨 블로그

이 글은 제로초 님의 리액트 강좌를 베이스로 개인 공부하는 포스팅 입니다.


제로초 React 기본 강좌 https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

리액트 공식 문서 (https://ko.reactjs.org/)



리액트

리액트는 기본적으로 자바스크립트 파일

<html>
  <head></head>
  <body>

    <script src="xxx.js"></script><!-- xxx.js 가 리액트가 됨 -->

  </body>
</html>


웹팩

웹팩은리액트를 자바스크립트 파일로 만들어 주는 것 (쪼개진 자바스크립트 파일을 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
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script><!-- 리액트가 동작하는 핵심적인 코드가 들어있음 -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><!-- 리액트 코드를 웹에다가 붙혀줌 -->
  <!-- 앞으로 리액트를 시작하자마자 바로 설치해야 될게 리액트랑 리액트 돔이 됨 -->
 
  <!-- 실제 배포할땐 -->
  <!-- <script src="https://unpkg.com/react@16/umd/react.production.js"></script> -->
  <!-- <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.js"></script> -->
 
</head>
<body>
  <div id="root"></div><!-- 결과: <div id="root"><button>Like</button></div> -->
  <script>
    const e = React.createElement; // HTML 태그를 만듬
 
    // class 로 컴포넌트를 만듬. React 안에 Component 가 들어있고 그것을 상속(extends)을 받음
    // Component를 상속 받으면 LikeButton 라는 클래스를 만들어 컴포넌트로써 사용
    class LikeButton extends React.Component { 
 
      // class 는 기본적으로 constructor 가 있다고 생각.
      // 컴포넌트가 실행될때 제일 먼저 실행되는 부분.
      constructor(props) { 
        super(props);
      }
 
      // LikeButton 안에 render는 좋아요 버튼을 '어떻게 화면에 표시할 것인지를 결정'해 주는 메서드
      render() {
        return e('button'null'Like'); // <button>Like</button> 이런 태그를 만들려함
      }
    }
  </script>
 
  <script>
    // ReactDOM 리액트로 컴포넌트룰 만들겠다 해놓것을 돔에다가 붙이겠다 | 랜더링을 해준다
    ReactDOM.render(e(LikeButton), document.querySelector('#root'));
  </script>
</body>
</html>


댓글 0