단위를 변환해주는 컴포넌트를 만든 후 그것을 App이라는 최종 컴포넌트에 담는 분할정복 방식을 사용해 구현해볼거다!
단위 변환은 두가지를 선택지가 있는데 분을 시간으로/ km를 mile로 변환하는 것을 선택하게끔 해볼 것이다.
select 와 onChange
보통 선택지를 고르는 UI를 구현하려 할때 html의 <select> 앨리먼트를 이용해볼 수 있다.
이제 여기서 select의 change Event 를 listen해 볼건데 onChange 속성을 이용해 볼거다.
++) onChange 속성은 속성으로 value를 가지는 엘리먼트에 다 갖다 붙일 수 있다!
w3schools 문서에 따르면
"The onchange attribute fires the moment when the value of the element is changed." 라고 되어있는데 value가 바뀔 때 onChange 속성이 실행된다는 것을 보니 value와 onChange는 긴밀한 연결성이 있는 것 같다.
select에 변화가 생기면 onChange함수가 onSelect를 호출할거고 event의 value가
출력될것이다. 예를 들어 Km&Miles를 선택한다면 value가 2가 나올 것이다.
setState를 통해서 정리
index의 초기값은 useState에 의해 0이 될거고 그것을 select 앨리먼트에 value 속성에 넣어준다.
select에서 변화가 감지될 때 마다 onSelect 함수가 실행되고 거기서 setIndex에 의해 선택지에 따른 value값이 바뀐 것이 index 값에 저장될 것이다.
render
그러면 value가 0 일때는 분 -> 시간 컴포넌트가 랜더 되야하고
value가 1일때는 km& miles 컴포넌트가 랜더 돼야 한다. 이것을 삼항연산자로 만들어 볼 수 있다. 아주 간단하게!
이렇게 하면 Minutes & Hours 를 선택하면 MinutesToHours 컴포넌트가 랜더 된다.
최종코드
|
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
let counter = 0;
function MinutesToHours() {
const [amount, setAmount] = React.useState();
const [inverted, setInverted] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => {
setAmount(0);
};
const onFlip = () => {
reset();
setInverted((current) => !current);
}
return (
<div>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount * 60 : amount}
id="minutes"
placeholde="Minutes"
type="number"
onChange={onChange}
disabled={inverted === true}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={inverted ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
disabled={inverted=== false}
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{inverted ? "Turn back" : "Invert"}</button>
</div>);
};
function KmToMiles(){
const [amount,setAmount]=React.useState(0);
const [inverted,setInverted]=React.useState(false);
const onChange=(event)=>{
setAmount(event.target.value);
}
const reset=()=>{
setAmount(0);
}
const onFlip=()=>{
reset();
setInverted((current)=>!current);
}
return (
<div>
<h3> Km 2 Hours </h3>
<div>
<label htmlFor="KM">KM</label>
<input
value={inverted ? amount * 1.6 : amount}
id="KM"
placeholde="km"
type="number"
onChange={onChange}
disabled={inverted === true}
/>
</div>
<div>
<label htmlFor="MILES">MILES</label>
<input
value={inverted ? amount : amount*0.62}
id="MILES"
placeholder="miles"
type="number"
disabled={inverted=== false}
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{inverted ? "Turn back" : "Invert"}</button>
</div>
);
}
function App() {
const[index,setIndex]=React.useState("xx");
const onSelect=(event)=>{
setIndex(event.target.value)
}
return (
<div>
<h1 >Super Converter</h1>
<select value={index} onChange={onSelect}>
<option value="xx"> Select your units </option>
<option value="0" > Minutes & Hours</option>
<option value="1"> Km & Miles </option>
</select>
{index ==="xx" ? "Plz select your units" : null}
{index ==="0" ? <MinutesToHours/> : null}
{index ==="1" ? <KmToMiles/> : null}
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
|
cs |
'React' 카테고리의 다른 글
| [React] clean up function (0) | 2022.05.02 |
|---|---|
| [React] props (0) | 2022.04.08 |
| [React] input과 state (0) | 2022.04.03 |
| [React] state (0) | 2022.04.03 |
| [React] JSX (0) | 2022.04.03 |
댓글