728x90
반응형
2021.08.01
53번째 포스팅
입사 146일차.
Hooks API의 등장으로 React에서의 class는 뒷방 늙은이가 되어버렸다.
하지만 Hooks API가 널리 상용화되기 이전 또는 지금까지도 class로 구성된 컴포넌트들은 많기 때문에
우리는 class 컴포넌트에 대해 공부해야만 한다.
0. 출처
① ZeroCho님의 무료 인프런강좌 (링크)
② Do it! 리액트 프로그래밍 정석 (eBook)
③ 초보자를 위한 Node.js 200제 (오프라인 구매)
1. ReactDOM
① 작성한 React코드를 WEB에 렌더링 (= 화면을 구현)
② ReactDOM.render(e(클래스명), document.querySelector('#id'));
ReactDOM.render(<컴포넌트명/>, document.getElementById("id"));
#id라는 id를 부여받은 태그의 서브태그로 클래스 또는 컴포넌트를 작성해주는 메소드
③ 위의 메소드를 이용해서 View에 렌더링할 수 있다.
|
1
2
3
4
5
|
<script>
// ReactDOM을 이용해서 렌더링
// id를 부여받은 태그에 작성한 React클래스를 서브코드로 붙여서 렌더링
ReactDOM.render(e(클래스명), document.querySelector('#id'));
</script>
|
cs |
2. render()
① 화면을 그리는 부분
② JAVA와 같이 return에 원하는 태그 혹은 컴포넌트를 작성하면 된다.
|
1
2
3
4
5
|
// 화면을 그리는 부분
render() {
// <button>버튼그리기</button>
return e('button', null, '버튼그리기');
}
|
cs |
3. React.createElement
① React컴포넌트를 생성하는 API
② React컴포넌트튼 React.createElement를 통해 Element의 정보를 가지는 Object를 생성한다.
4. Class Component
|
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
|
<html>
<head>
<!-- React의 핵심기능 (스크립트, 배포시 react.production.js로 수정필요) -->
<!-- <script crossorigin src="https://unpkg.com/react@16/umd/react.production.js"></script> -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- ReactDOM (Document Object Model) 작성한 React코드를 WEB에 렌더링 (화면을 구현) -->
<!-- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.js"></script> -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="index_pge"></div>
<script>
// React 컴포넌트를 생성하는 API
const e = React.createElement;
class StartLesson01 extends React.Component {
// 클래스는 기본적으로 consturctor()를 가진다. (생성자)
// 컴포넌트가 실행될때 가장 먼저 실행된다.
constructor(props) {
super(props);
}
// 화면을 그리는 부분
render() {
// <span>리액트 시작</span> 의 태그를 작성하겠다는 코드
return e('span', null, '리액트 시작!');
}
}
</script>
<script>
// ReactDOM을 이용해서 렌더링
// #index_pge에 작성한 코드를 붙여서 렌더링
ReactDOM.render(e(StartLesson01), document.querySelector('#index_pge'));
</script>
</body>
</html>
|
cs |
다음포스팅의 주제
728x90
반응형
'프론트엔드 > 리액트' 카테고리의 다른 글
| [React] ⑥ HooksAPI (0) | 2021.09.22 |
|---|---|
| [React] ⑤ React.Fragment, this, ref (0) | 2021.09.15 |
| [React] ④ <input>태그에 값 입력하기 (1) | 2021.08.16 |
| [React] ③ babel (0) | 2021.08.03 |
| [React] ① React가 주목받게 된 이유 (0) | 2021.07.19 |
댓글