분 <> 시간
킬로미터 <> 마일
킬로그램 <> 파운드
을 선택해서 원하는 단위를 변경할 수 있는 프로그램을 만들었다.
리셋을 누르면 값이 0으로 바뀌고,
플립을 누르면 입력할 수 있는 값이 바뀐다.
(처음에는 분만 입력하여 시간을 확인할 수 있고, 플립을 누르면 시간을 입력해서 몇 분인지 확인할 수 있다)
다음은 코드인데 코드는 파운드 <>킬로그램을 변환하는 코드를 가져왔다.
단위 변환 매커니즘은 input에 값을 입력받는다.
입력한 값이 바뀌면 onChange함수로 그 값을 useState로 새로운 값에 저장해서 그걸 반환해준다.
const [PAmount, PSetAmount] = React.useState();
const onChange=(event)=>{
PSetAmount(event.target.value);처음에는 아무 값도 할당하지 않고, 바뀌는 이벤트가 발생했을 때(onChange)
PSetAmount에 바뀐값을 추적해서 할당해준다.(바로 화면을 바꾸고 PAmount에 저장된다)
Kg에 *2.2046을해 Pound를 산출
Pound입력시에 /2.2046을해 Kg를 산출
const reset=()=>{
PSetAmount(0);
}현재 값에 0을 저장해서 화면에 바꿔주는 함수를 추가하고 맨 밑의 reset버튼에 onClick이벤트가 발생했을 때 reset함수가 실행될 수 있도록 추가해준다.
flip버튼을 누르면 입력할 수 있는 단위가 바뀌는 동작은 조금 복잡하다.
input태그에 disabled라는 값을 추가해주면 추가된 창은 입력을 할 수 없게 설정된다.
kilogram을 입력하는 창에 disabled={false}로 처음에 입력해주고, pound를 입력하는 창에 disabled={true}로 입력한 다음 flip을 누르면 안의 값들이 서로 바뀐다.
const [Pflipped, PSetFlipped] = React.useState(true);
const onflip=()=>{
PsetFlipped((current)=>!current);
reset(0);
};disabled에 pflipped을 부여해
disabled={Pflipped === true}, disabled={Pflipped === false}로 각각 저장한다.
onflip이란 함수를 만들고 onflip이 호출되면 현재의 값에서 반대의 값으로 저장되게 해준다.
disabled가 true였다면 false로 false였다면 true로 바뀌게 해준다.
위 코드는 어떤 단위변환 프로그램이 화면에 나오게 할 것이냐를 결정하는 선택창을 만드는 코드이다.
jsx로 선택창을 만들고 그 안에 옵션들로 각각 프로그램들을 추가해준다.
옵션들에 밸류를 각각 다르게 설정해준다.
const [index, Setindex] = React.useState("0");
const onSelect=(event)=>{
Setindex(event.target.value);
}useState("0");으로 최초의 밸류에 0을 저장해주고 바뀌면 그 밸류값을 불러와 새로저장해준다.
삼항연산자를 통해 index의 밸류가 0이면 시간 분 변환기를
index의 밸류가 1 이면 키로미터 마일 변환기를
index의 밸류가 2 이면 키로그램 파운드 변환기를 호출한다.
삼항연산자는 if 대신 쓸 수 있는 조건문 중 하나인데,
{판별식 ? 참이었을 때 실행할 코드 : 거짓이었을 때 호출 할 코드};
로 쓸 수 있다.
{index === "0" ? 시간<>분변환기 호출 : null}
{index === "1" ? 키로미터<>마일변환기 호출 : null}
{index === "2" ? 키로그램<>파운드변환기 호출 : null}
