일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- #C++ 연산자함수오버로딩
- html object
- #자바상속#자바이즈어#is~a
- #C++ has~a
- #1차원배열
- git flow
- relative path
- #android activity
- #2차원배열
- 토큰경제
- #성적관리프로그램
- html youtube
- 하이퍼레저패브릭
- #JAVASCRIPT
- mac terminal command
- #다차원포인터
- html id
- html multimedia
- border-box
- #CallByAddress
- html5 new tag
- html charset
- #bubbleSort
- hyperledger transaction
- html code
- #binary
- html video
- #3차원배열
- html plug-in
- docker example
Archives
- Today
- Total
A sentimental robot
React : component 본문
React의 핵심인 Component에 대하여 공부해자.
나는 이제 리액트를 이용하여 나만의 서버를 만들어 볼 것이기 때문에 전에 만든 리액트 프로젝트 > src 폴더 >
App.css를 날려버리고 App.js의 코드를 간단하게 바꿔보았다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
import React, { Component } from 'react';
import Tem from './components/Tem';
import Form from './components/Form';
{/* webpack을 쓰기에 가능한 작업*/ }
class App extends Component {
render() {
return (
<Tem form={<Form/>}> {/*JSX 문법*/}
</Tem>
);
}
}
export default App;
|
cs |
전 포스트에서 말했듯이 App.js 파일에서 리턴해준 <App/>은 index.js에서 렌더링을 위해 사용된다.
App은 내가 만든 컴포넌트이다. App클래스를 보니 Componenet를 상속받고 있지 않은가!
App 클래스 안을 더 살펴보자.
render라는 함수에서 또 다른 컴포넌트를 쓰고 있다. <Tem/>과 <Form/>이라는 컴포넌트이다.
즉 App component는 Tem과 Form이라는 component의 조합이다.
Tem과 Form 역시 내가 만든 컴포넌트이다. component폴더 안에 Tem.js 와 Form.js라는 파일에서 import로 불러
온 친구들이다.
App.js 맨 밑에 export는 '내보내다, 수출하다(데이터를 다른 프로그램에서 읽을 수 있도록 전환하여 발송하는 것) ' 이라는 뜻인데, App을 쓰고 싶은 다른 곳에서 import로 불러와 쓸 수 있게 내보낸다는 뜻이다.
이제 리액트 컴포넌트의 조합을 통해 어떻게 UI를 만드는 지 감이 오는가?
'MERN stack' 카테고리의 다른 글
Mongo DB(1) (0) | 2018.10.26 |
---|---|
React : props, state (0) | 2018.10.24 |
React : render (0) | 2018.10.22 |
React.js 환경 구축 (0) | 2018.10.22 |
Node.js에 관한 고찰 (0) | 2018.10.18 |