Showing
2 changed files
with
40 additions
and
21 deletions
1 | -import React from 'react'; | 1 | +import React, { Component } from 'react'; |
2 | -import logo from './logo.svg'; | ||
3 | import './App.css'; | 2 | import './App.css'; |
3 | +import Customer from './components/Customer' | ||
4 | 4 | ||
5 | -function App() { | 5 | +const customer ={ |
6 | - return ( | 6 | + 'name': '이혜연', |
7 | - <div className="App"> | 7 | + 'birthday': '000416', |
8 | - <header className="App-header"> | 8 | + 'gender': '여자', |
9 | - <img src={logo} className="App-logo" alt="logo" /> | 9 | + 'job': '대학생' |
10 | - <p> | ||
11 | - Edit <code>src/App.js</code> and save to reload. | ||
12 | - </p> | ||
13 | - <a | ||
14 | - className="App-link" | ||
15 | - href="https://reactjs.org" | ||
16 | - target="_blank" | ||
17 | - rel="noopener noreferrer" | ||
18 | - > | ||
19 | - Learn React | ||
20 | - </a> | ||
21 | - </header> | ||
22 | - </div> | ||
23 | - ); | ||
24 | } | 10 | } |
25 | 11 | ||
12 | +class App extends Component { | ||
13 | + render() { | ||
14 | + return ( | ||
15 | + <Customer | ||
16 | + name={customer.name} | ||
17 | + birthday={customer.birthday} | ||
18 | + gender={customer.gender} | ||
19 | + job={customer.job} | ||
20 | + /> | ||
21 | + ); | ||
22 | + } | ||
23 | +} | ||
24 | + | ||
25 | + | ||
26 | + | ||
26 | export default App; | 27 | export default App; | ... | ... |
management/src/components/Customer.js
0 → 100644
1 | +import React from 'react'; | ||
2 | + | ||
3 | +class Customer extends React.Component { | ||
4 | + render(){ | ||
5 | + return( | ||
6 | + <div> | ||
7 | + <h2>{this.props.name}</h2> | ||
8 | + <p>{this.props.birthday}</p> | ||
9 | + <p>{this.props.gender}</p> | ||
10 | + <p>{this.props.job}</p> | ||
11 | + </div> | ||
12 | + ); | ||
13 | + } | ||
14 | + | ||
15 | +} | ||
16 | + | ||
17 | + | ||
18 | +export default Customer; | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
-
Please register or login to post a comment