[study] 제로초 리액트 기본강좌 1-2 첫 리액트 컴포넌트
리액트(React) 2020. 2. 3. 17:16
728x90
반응형
이 글은 제로초 님의 리액트 강좌를 베이스로 개인 공부하는 포스팅 입니다.
제로초 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> |
반응형
'리액트(React)' 카테고리의 다른 글
| [study] 제로초 리액트 기본 강좌 1-2 첫 리액트 (0) | 2019.12.31 |
|---|