KmToMiles Converter 를 구현하고
여러 개의 Converter 중 선택한 Converter 만 보여지도록 할 것이다.
이건 개인 과제로 주어진 것인데
이전 강의를 잘 수강했다면 무리없이 구현할 수 있다!!
Unit Converter 구현하기 - (1) 컴포넌트 분리
MinutesToHours 함수 생성
지금까지 구현한 코드는 MinutesToHours 라는 함수를 따로 만들어서 분리
KmToMiles 함수 생성
실제 기능 구현 전, 함수만 만들어 뒀다.
App()
select 를 이용해 Converter 를 선택할 수 있게 함
어떤 index 를 선택했는지에 따라 다른 컴포넌트를 보여준다.
index 와 onSelect
index : 선택된 값을 가짐
onSelect : 선택된 값 (event.target.value) 로 index 변경
화면에 보여지는 부분
select 생성
option 1) Select your units (default)
option 2) Minutes To Hours
option 3) Km To Miles
셋 중 하나를 선택하면 onSelect 실행
삼항연산자를 이용해 index 에 따라 다른 컴포넌트 보여주기
xx => option 1
0 => option 2
1 => option 3
결과
전체 코드
더보기
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function MinutesToHours() {
const [amount, setAmount] = React.useState(0);
const [inverted, setInverted] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => {
setAmount(0);
};
const onInvert = () => {
reset();
setInverted((current) => !current);
};
return (
<div>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount * 60 : amount}
id="minutes"
placeholer="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"
placeholer="Hours"
type="number"
onChange={onChange}
disabled={inverted === false}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{inverted ? "Turn Back" : "Invert"}</button>
</div>
);
}
function KmToMiles() {
// KmToMile Code
return (
<div>
KmToMiles
</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>
<hr/>
{index === "xx" ? "Please select your units" : null}
{index === "0" ? <MinutesToHours/> : null}
{index === "1" ? <KmToMiles/> : null}
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App/>, root);
</script>
</html>
Unit Converter 구현하기 - (2) KmToMiles 구현
전체적으로 MinutesToHours 와 동일한 기능을 수행한다.
이름들과 amount 값만 바꿔주면 됨
구글링으로 단위 변환 공식을 확인
Miles 는 amount / 1.069
Km 는 amount * 1.069
로 설정하면 끝!
결과
전체 코드
더보기
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function MinutesToHours() {
const [amount, setAmount] = React.useState(0);
const [inverted, setInverted] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => {
setAmount(0);
};
const onInvert = () => {
reset();
setInverted((current) => !current);
};
return (
<div>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount * 60 : amount}
id="minutes"
placeholer="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"
placeholer="Hours"
type="number"
onChange={onChange}
disabled={inverted === false}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{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 onInvert = () => {
reset();
setInverted((current) => !current);
};
return (
<div>
<div>
<label htmlFor="km">Km</label>
<input
value={inverted ? amount * 1.609 : amount}
id="km"
placeholer="Km"
type="number"
onChange={onChange}
disabled={inverted === true}
/>
</div>
<div>
<label htmlFor="miles">Miles</label>
<input
value={inverted ? amount : amount/1.609}
id="miles"
placeholer="Miles"
type="number"
onChange={onChange}
disabled={inverted === false}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{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>
<hr/>
{index === "xx" ? "Please select your units" : null}
{index === "0" ? <MinutesToHours/> : null}
{index === "1" ? <KmToMiles/> : null}
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App/>, root);
</script>
</html>
이렇게 Unit Converter 를 완성했다!!
더 완성도 높이고 싶다면
또 다른 Converter 들을 추가하거나 메뉴바를 만들기 등
원하는대로 적용해보면 좋을 것 같다.
다음은 #4. Props 차례~
'FrontEnd > React' 카테고리의 다른 글
| [ReactJS] Effect - ReactJS 로 영화 웹 서비스 만들기 (6) (0) | 2021.12.02 |
|---|---|
| [ReactJS] Create React App - ReactJS 로 영화 웹 서비스 만들기 (5) (0) | 2021.11.26 |
| [ReactJS] Props - ReactJS 로 영화 웹 서비스 만들기 (4) (0) | 2021.11.26 |
| [ReactJS] State - ReactJS 로 영화 웹 서비스 만들기 (2) (0) | 2021.11.25 |
| [ReactJS] Introduction & The Basics of React - ReactJS 로 영화 웹 서비스 만들기 (1) (0) | 2021.11.24 |
댓글