1. 고객 컴포넌트 만들기
src에 components디렉하나 만들어주고 그아래 Customer.js 파일을 만들어준다.
<App.js>
|
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
|
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Customer from "./components/Customer";
const customer = {
name: "들짐승",
birthday: "112345",
gender: "남자",
job: "없음"
};
class App extends Component {
render() {
return (
<Customer
name={customer.name}
birthday={customer.birthday}
gender={customer.gender}
job={customer.job}
/>
);
}
}
export default App;
|
cs |
App.js에 고객변수 하나를 만들어주고 Customer에 속성으로 넘겨준다.
<Customer.js>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
import React, {Component} from 'react';
class Customer extends Component{
render(){
return(
<div>
<h2>{this.props.name}</h2>
<p>{this.props.birthday}</p>
<p>{this.props.gender}</p>
<p>{this.props.job}</p>
</div>
)
}
}
export default Customer;
|
cs |
Customer에서는 props로 받는다.
render부분을 보면
여러 태그들이 병렬로 나열돼있어서 <div>태그로 묶어줘야한다.
[리액트]props state
1. props props는 생성자 인자로 비유해서 이해했다. MyComponent 태그를 보면 속성=값 으로 인자를 넘겨줬다. 객체를 찍어낼때 생성자 인자로 "a", "b"를 넘겨줬다고 생각하면된다. 2.state state는 클래스의 pr..
fieldanimal.tistory.com
글고 동빈나형님이 개꿀팁 알려주셨는데
class Customer부분을 컨트롤+클릭하면
클래스 정의부로 자동으로 이동한다.
2. 고객 컴포넌트 쪼개기
<Customer.js>만 수정한다.
|
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
38
39
40
41
42
43
44
|
import React, { Component } from "react";
class Customer extends Component {
render() {
return (
<div>
<CustomerProfile
id={this.props.id}
name={this.props.name}
></CustomerProfile>
<CustomerInfo
birthday={this.props.birthday}
gender={this.props.gender}
job={this.props.job}
></CustomerInfo>
</div>
);
}
}
class CustomerProfile extends Component {
render() {
return (
<div>
<h2>{this.props.id}</h2>
<h2>{this.props.name}</h2>
</div>
);
}
}
class CustomerInfo extends Component {
render() {
return (
<div>
<p>{this.props.birthday}</p>
<p>{this.props.gender}</p>
<p>{this.props.job}</p>
</div>
);
}
}
export default Customer;
|
cs |
Customer를 CustomerProfile이랑 CustomerInfo로 나눠서
각각 렌더링한다.
내부에서만 사용되는 클래스니깐
export할땐 걍 Customer만 해주면된다.
3. 데이터 추가하기
<App.js>에 데이터 추가하기
|
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
38
39
40
41
42
43
44
45
46
47
48
49
50
|
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Customer from "./components/Customer";
const customers = [
{
id: 1,
name: "name1",
birthday: "112345",
gender: "남자",
job: "없음"
},
{
id: 2,
name: "name2",
birthday: "112345",
gender: "남자",
job: "없음"
},
{
id: 3,
name: "name3",
birthday: "112345",
gender: "여자",
job: "없음"
}
];
class App extends Component {
render() {
return (
<div>
{customers.map(c => {
return (
<Customer
id={c.id}
name={c.name}
birthday={c.birthday}
gender={c.gender}
job={c.job}
></Customer>
);
})}
</div>
);
}
}
export default App;
|
cs |
map함수를 사용해서 조진다.
map안에 화살표함수가 있는데 익명함수쓸때 간단히 처리한다고 한다.
https://wayhome25.github.io/javascript/2017/02/23/js-Arrow-functions/
자바스크립트 화살표 함수 · 초보몽키의 개발공부로그
자바스크립트 화살표 함수 23 Feb 2017 | javascript 함수 화살표 함수 화살표 함수 (Arrow functions) 설명 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고, 화살표 함수는 항상 익명입니다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적당합니다. 그래서 생성자로서 사용할 수 없습니다. MDN 문법 (param1, param2, …, paramN) => { stat
wayhome25.github.io
var a = [
"Hydrogen",
"Helium",
"Lithium",
"Beryllium"
];
var a2 = a.map(function(s){ return s.length });
var a3 = a.map( s => s.length );
'웹 > 리액트' 카테고리의 다른 글
| [리액트]고객관리 시스템_API서버 만들기 (0) | 2019.09.01 |
|---|---|
| [리액트]고객관리 시스템_UI (2) | 2019.09.01 |
| [리액트]고객관리 시스템_프로젝트 생성 (0) | 2019.09.01 |
| [리액트]형상관리 (0) | 2019.08.31 |
| [리액트]앱 빌드/배포 (0) | 2019.08.31 |
