코드 챌린지 준비작업
사용자가 원하는 단위 변환기를 선택하도록 할 것이다,
분/ 시간, 마일/킬로미터 등으로..
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function MinutesToHours() {
const [amount, setAmount] = React.useState();
const [inverted, setFlipped] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount(0);
const onInvert = () => {
reset();
setFlipped((current) => !current);
};
return (
<div>
<h3>Minutes to Hours</h3>
<label htmlFor="amount">Amount</label>
<div>
<input
value={inverted ? amount * 60 : amount}
id="amount"
placeholder="amount"
type="number"
onChange={onChange}
disable={inverted === true}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={inverted ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
disable={inverted === false}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>
{inverted ? "Back again" : "Invert"}
</button>
</div>
);
}
function KmToMiles() {
const [distance, setDistance] = React.useState();
const [inverted2, setInverted2] = React.useState(false);
const onChange = (event) => {
setDistance(event.target.value);
};
const reset = () => setDistance(0);
const onInvert2 = () => {
reset();
setInverted2((current) => !current);
};
return (
<div>
<h3>KM 2 MM</h3>
<label htmlFor="KM">Kilometer</label>
<div>
<input
value={inverted2 ? distance / 1000 : distance}
id="KM"
placeholder="KM"
type="numbers"
onChange={onChange}
disable={!inverted2}
/>
</div>
<label htmlFor="MM">Milimeter</label>
<div>
<input
value={inverted2 ? distance : distance * 1000}
id="MM"
placeholder="MM"
type="number"
onChange={onChange}
disable={inverted2}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert2}>
{inverted2 ? "Back again" : "Invert"}
</button>
</div>
);
}
function App() {
// root를 렌더링하고
//컴포넌트 안에 다른컴포넌트 렌더링 하기
//app이 state를 가지도록 해보자
const [index, setIndex] = React.useState("xx");
const onSelect = (event) => {
setIndex(event.target.value);
};
console.log(index);
return (
<div>
<h1> Super Converter</h1>
<select value={index} onChange={onSelect}>
<option value="xx">Select yout Unit</option>
<option value="0">H&M</option>
<option value="1">KM&M</option>
</select>
//switch로 변환하기 ! JSX에 대해 배우고, select에 대해 배울 것이다 !
{index === "xx" ? "Select yout unit" : null}
{index === "0" ? <MinutesToHours /> : null}
//중괄호 안에는 Javascript쓸 수 있다.
{index === "1" ? <KmToMiles /> : null}
//작은 if else를 이용하여 만든다. 컴포넌트 안에 JSX를 사용하여.. //
지금 하고 있는 것은 index의 변화를 리스닝 해준다. 그리고 변화 감지
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
만약 데이터를 수정하기 위해 modifier함수를 이용한다면 그 modifier함수fmf 사용할 때 새로운 데이터와 함께 업데이트 될 것이다
시작단계에서 우리의 app컴포넌트는 index에 설정한 디폴트 값으로 시작된다
중요한 것은 우리가 modifier 함수를 실행하면 이 모든 컴포넌트들이 다시 랜더링 된다는 것 !!
최강 프론트엔드 개발자가 되고싶은 안유진 입니다