728x90
반응형
2021.08.03
54번째 포스팅
입사 148일차.
React는 스크립트에서 <html> 태그들을 그대로 return에 작성할 수 있도록 지원한다.
하지만 모든것을 지원하지는 않기 때문에 Spring의 빌드도구들(maven, gradle)처럼 특별한 무엇인가가 필요하다.
그런 기능들을 지원해주는 것이 바로 babel이다.
0. 출처
① ZeroCho님의 무료 인프런강좌 (링크)
② Do it! 리액트 프로그래밍 정석 (eBook)
③ 초보자를 위한 Node.js 200제 (오프라인 구매)
1. babel
① JavaScript Compiler
② JavaScript 최신 문법을 브라우저가 이해할 수 있는 문법으로 변환해주는 트랜스파일러.
③ ES6, ES2017등의 최신문법을 사용할 수 있기 때문에 생산성 및 편리성이 증가한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<head>
<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>
<!-- babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="index_pge"></div>
<!-- babel을 사용하기 위해 필요한 코드 -->
<script type="text/babel">
</script>
</body>
</html>
|
cs |
2. babel을 사용한 React코드 작성
|
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
|
<html>
<head>
<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>
<!-- babel을 사용해서 태그형식으로 코드 구현 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="index_pge"></div>
<!-- babel을 사용하기 위해서는 script의 type을 지정해주어야 한다 --> <script type="text/babel">
class ShowConsole01 extends React.Component {
constructor(props) {
super(props);
}
render() {
// onClick을 이용해서 console.log() 메소드를 사용
return <button type="button" onClick={() => {console.log('showConsole01 표시!')}}>
로그찍기01
</button>;
}
}
class ShowConsole02 extends React.Component {
constructor(props) {
super(props);
}
render() {
return <button type="button" onClick={() => {console.log('showConsole02 표시!')}}>
로그찍기02
</button>;
}
}
</script>
<script type="text/babel">
// class로 만들어진 컴포넌트들은 아래의 코드처럼 쉽게 반복사용이 가능하다.
ReactDOM.render(<div><ShowConsole01 /><ShowConsole01 /><ShowConsole02 /></div>, document.querySelector('#index_pge'));
</script>
</body>
</html>
|
cs |
|
|
|
다음포스팅의 주제
[React] ④
태그에 값 입력하기
2021.08.16 55번째 포스팅 입사 161일차. React에서는 html에서 쓰던 것처럼 태그를 만들면 값이 입력되지도 않고 바뀌지도 않는다.값을 입력하거나 수정하는 것 뿐이지만 이벤트를 만들어줘야 한다.
limreus.tistory.com
728x90
반응형
'프론트엔드 > 리액트' 카테고리의 다른 글
| [React] ⑥ HooksAPI (0) | 2021.09.22 |
|---|---|
| [React] ⑤ React.Fragment, this, ref (0) | 2021.09.15 |
| [React] ④ <input>태그에 값 입력하기 (1) | 2021.08.16 |
| [React] ② 클래스 컴포넌트 (Class Component) (0) | 2021.08.01 |
| [React] ① React가 주목받게 된 이유 (0) | 2021.07.19 |
댓글