JSX에서의 배열 사용하기
1단계:
1
<div id="root"></div>
1
2
3
#root {
padding: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Round extends React.Component {
render() {
let roundStyle = {
display: "inline-block",
margin: 10,
width: 100,
height: 100,
backgroundColor: this.props.backgroundColor,
borderRadius: 50
};
return <div style={roundStyle}></div>;
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Round backgroundColor="#09f" />);
2단계:
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
class Round extends React.Component {
render() {
let roundStyle = {
display: "inline-block",
margin: 10,
width: 100,
height: 100,
backgroundColor: this.props.backgroundColor,
borderRadius: 50
};
return <div style={roundStyle}></div>;
}
}
let round1 = <Round backgroundColor="#f90" />;
let round2 = <Round backgroundColor="#eaeaea" />;
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<div>
{root1}
{root2}
</div>,
document.getElementById("container")
);
1
2
let round1 = <Round backgroundColor="#f90" />;
let round2 = <Round backgroundColor="#eaeaea" />;
클래스 컴포넌트를 인스턴스화 하여 사용하고 있다.
간단히 말해서 인스턴스는 복제물이고, 클래스는 복제물의 원보이 되는 설계도!
3단계:
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
class Round extends React.Component {
render() {
let roundStyle = {
display: "inline-block",
margin: 10,
width: 100,
height: 100,
backgroundColor: this.props.backgroundColor,
borderRadius: 50
};
return <div style={roundStyle}></div>;
}
}
// let round1 = <Round backgroundColor="#f90" />;
// let round2 = <Round backgroundColor="#eaeaea" />;
let drawNewRound = () => {
let colors = ["#f90", "#09f", "#eaeaea", "#ccc"];
let randomColor = Math.floor(Math.random() * colors.length);
return <Round backgroundColor={colors[randomColor]} />;
};
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<div>
{/*
{round1}
{round2}
*/}
{drawNewRound()}
{drawNewRound()}
</div>,
document.getElementById("container")
);
1
2
3
4
5
6
{
/*
{round1}
{round2}
*/
}
JSX에서는 {/_ … _/} 방식으로 주석을 작성한다.
4단계:
동일한 클래스의 인스턴스인 경우, 반복적으로 생성될 경우 키를 사용해서 생성한다.
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
class Round extends React.Component {
render(){
let roundStyle = {
display: "inline-block",
margin: 10,
width: 100,
height: 100,
backgroundColor: this.props.backgroundColor,
borderRadius: 50
};
}
}
/*
let drawNewRound = () => {
let colors = ["#f90", "#09f", "#eaeaea", "#ccc"];
let randomColor = Math.floor(Math.random()*colors.length);
return <Round backgroundColor = {colors[randomColor]} />
};
*/
let colors = ["#f90", "#09f", "#8ac007", "#ccc", "#999"];
/*
let componentData = [];
for(let i = 0; i < colors.length; i++){
let color = colors[i];
componentData.push(<Round key = {i} backgroundColor = {color} />);
}
*/
let componentData = colors.map((d, i) => <Round key = {i + 1} backgroundColor = {d} >);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<div>
{/*
{drawNewRound()}
{drawNewRound()}
*/}
{componentData}
</div>
);