A sentimental robot

React : component 본문

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를 만드는 지 감이 오는가? 

'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