MERN stack
React : component
GOD03219
2018. 10. 22. 20:40
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를 만드는 지 감이 오는가?