다음 함수는 컴포넌트의 속성 값을 받는 "props"라는 매개 변수를 가집니다.
전달되는 모든 속성을 객체로 받습니다. 속성이 key가 되고 값이 value가 됩니다.
|
// 함수로 컴포넌트 만들기
function Welcome1(props) {
console.log(JSON.stringify(props));
return <h2>{props.name}({props.age}세)님 반갑습니다.</h2>;
}
|
콘솔 창에 전달된 데이터가 다음과 같이 표시됩니다.
| {"name":"한사람","age":18} |
클래스 컴포넌트에서는 "this.props"로 전달이 됩니다.
|
// ES6의 클래스로 컴포넌트 만들기
class Welcome2 extends React.Component {
render() {
console.log(JSON.stringify(this.props));
return <h2>{this.props.name}({this.props.age}세)님 반갑습니다.</h2>;
}
}
|
마찬 가지로 콘솔 창에 전달된 데이터가 다음과 같이 표시됩니다.
| {"name":"한사람","age":18} |
데이터가 여러개일 경우에는 반복문을 사용해서 처리 합니다.
JSX내에서 명령문을 사용할때에는 {}안에 기술 합니다.
|
<div>
{
[
<Welcome1 key={users[0].id} name={users[0].name} age={users[0].age}/>,
<Welcome2 key={users[1].id} name={users[1].name} age={users[1].age}/>
]
}
<hr/>
{ // Array.map() : 어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 만들어 줍니다.
users.map((user)=>{
return <Welcome1 key={user.id} name={user.name} age={user.age}/>
})
}
<hr/>
{
users.map((user)=>{
return <Welcome2 key={user.id} name={user.name} age={user.age}/>
})
}
</div>
|
다음은 완성된 전체 코드 입니다.
|
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
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React 예제 010</title>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
let users = [
{id:1, name:"한사람",age:18},
{id:2, name:"두사람",age:22},
]
// 함수로 컴포넌트 만들기
function Welcome1(props) {
console.log(JSON.stringify(props));
return <h2>{props.name}({props.age}세)님 반갑습니다.</h2>;
}
// ES6의 클래스로 컴포넌트 만들기
class Welcome2 extends React.Component {
render() {
console.log(JSON.stringify(this.props));
return <h2>{this.props.name}({this.props.age}세)님 반갑습니다.</h2>;
}
}
function App(){
return (
<div>
{
[
<Welcome1 key={users[0].id} name={users[0].name} age={users[0].age}/>,
<Welcome2 key={users[1].id} name={users[1].name} age={users[1].age}/>
]
}
<hr/>
{ // Array.map() : 어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 만들어 줍니다.
users.map((user)=>{
return <Welcome1 key={user.id} name={user.name} age={user.age}/>
})
}
<hr/>
{
users.map((user)=>{
return <Welcome2 key={user.id} name={user.name} age={user.age}/>
})
}
</div>
);
}
ReactDOM.createRoot(document.querySelector('#app')).render(<App/>);
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
|
cs |
다음은 실행 결과 입니다.
'Front End > React' 카테고리의 다른 글
| [React Exam 11] HTML로 시작해보는 React 보너스(천자문 보기 2) (0) | 2024.10.15 |
|---|---|
| [React Exam 10] HTML로 시작해보는 React 보너스(천자문 보기) (0) | 2024.10.15 |
| [React Exam 08] HTML로 시작해보는 React Component (2) | 2024.10.15 |
| [React Exam 07] HTML로 시작해보는 React 엘리먼트 렌더링 (6) | 2024.10.15 |
| [React Exam 06] HTML로 시작해보는 React JSX Style 사용하기 (1) | 2024.10.15 |
