📌 단위변환기 발전시키기
메뉴바를 만들어서 사용자가 원하는 단위변환기를 선택할 수 있도록 할 것이다.
앞에서 분/시간 변환기를 만들었는데, 마일/킬로미터 변환기를 하나 더 만들어 둘 중 하나를 사용자가 고를 수 있게 할 것이다.
1. App 컴포넌트에 작성했던 분/시간 변환 코드들은 또 다른 컴포넌트인 MinutesToHours에 붙여넣기 할 것이다. (h1 tag 부분(Super Converter)은 지워준다.)
App 컴포넌트는 제목 부분만 남기고 초기화한다.
function MinutesToHours() {
const [amount, setAmount] = React.useState(0);
.....
<button onClick={onFlip}>{inverted ? "Turn back" : "Invert"}button>
</div>
);
}
function App() {
return (
<div>
<h1>Super Converter</h1>
</div>
);
}
2. km를 miles 단위로 변환하는 컴포넌트 따로 만들기
우선, KmToMile 컴포넌트의 기본 형태만 만들어 놓는다.
function KmToMiles() {
return <h3>KM 2 M</h3>;
}
3. 단위 변환기 선택할 수 있도록 만들기
우리는 MinutesToHours 컴포넌트와 KmToMile 컴포넌트가 동시에 보여지는 것을 원치 않으므로 원하는 단위 변환기를 선택할 수 있도록 코드를 작성할 것이다.
따라서 useState를 사용하여 App 컴포넌트에 index를 data로 만들어 준다.
item의 순서가 중요한 것이다! index의 초깃값은 "0"(string)이고, index의 숫자에 해당하는 컴포넌트가 보여지게 하는 것이다.
function App() {
const [index, setIndex] = React.useState(0); // 주목!
return (
.....
그리고 HTML의 select tag와 option tag를 사용해 옵션 2개를 적어준다.
function App() {
const [index, setIndex] = React.useState("0
);
return (
<div>
<h1>Super Converter</h1>
<select>
<option value="0">Minutes & Hours</option>
<option value="1">Km & Miles</option>
</select>
</div>
);
}
결과로 두 종류 중 하나를 선택할 수 있는 목록이 만들어진다.
두 option을 구분할 수 있도록 value도 설정해 주었는데, index 번호 형식으로 설정해 주었다.
4. select에 이벤트 리스너(onChange) 등록하기
select란에 선택되어 있는 것에 변화가 생겼을 때(change event) 콜백 함수 onSelect 함수가 호출되도록 하였다.
.....
const onSelect = (event) => { // 주목!
console.log(event); // 주목!
};
return (
<div>
<h1>Super Converter</h1>
<select onChange={onSelect}> // 주목!
<option>Minutes & Hours</option>
<option>Km & Miles</option>
</select>
</div>
);
.....
다른 옵션을 선택한 결과로 console 창에 나타난 event 객체를 자세히 살펴보면, event 객체의 target 프로퍼티의 value 프로퍼티의 값에 우리가 option tag에 value 프로퍼티로 작성해 준 값과 똑같은 값이 나와 있는 것을 볼 수 있다.
이러한 코드로 사용자가 어떤 변환기를 선택했는지 알 수 있게 되었다.
이제 선택한 변환기의 value를 setIndex에 인자로 보내 index state에 저장되도록 코드를 작성한다.
.....
const onSelect = (event) => {
setIndex(event.target.value);
};
.....
<select value={index} onChange={onSelect}>
.....
혹시나 나중에 index data를 수정할 때를 대비하여 select에도 value를 부여하였다.
5. 어떤 컴포넌트를 화면에 그려줄지 결정하기
index에 선택한 option의 value를 저장함으로써 우리는 유저가 무엇을 선택했는지 알 수 있었다.
이제 그 index가 0이면 MinutesToHours 컴포넌트를, index가 1이면 KmToMiles을 반환하는 코드를 조건문(삼항 연산자)을 이용해 작성하면 된다.
return (
<div>
<h1>Super Converter</h1>
<select value={index} onChange={onSelect}>
<option value="0">Minutes & Hours</option>
<option value="1">Km & Miles</option>
</select>
{index === "0" ? <MinutesToHours /> : null} // 주목!
{index === "1" ? <KmToMiles /> : null} // 주목!
</div>
);
index가 여러 개일 경우에 대비해 따로 정의해 준다. 조건이 false일 시, null이 반환되어 해당 컴포넌트는 화면에 아예 나타나지 않는다.
6. 초기 option을 설정하여 단위 변환기를 고르기 전에는 화면에 변환기가 뜨기 않도록 하기
- 'Select your units' 문구의 옵션을 하나 만들고, value는 'xx'으로 한다.
- React.useState의 인자에도 'xx'를 주어 index의 초기값도 xx가 되도록 하자.
.....
const [index, setIndex] = React.useState("xx");
.....
<select value={index} onChange={onSelect}>
<option value="xx">Select your units</option>
.....
여기에서는 굳이 필요하지는 않지만 또 다른 변환기를 추가하고 싶을 때 다음과 같은 코드를 또 추가할 수 있다.
{
index === "xx" ? "Please select your units" : null;
}
댓글