반응형
💻미션: Unit Conversion(minutes -> hours) App 만들기💻
DOM(Document Object Model)
- 웹페이지 HTML elements를 트리 구조로 표현한 것
- DOM 구조 내 원하는 element에 접근해서 수정 가능
Virtual DOM
- 실제 DOM의 복사본
- JavaScript의 메모리에 저장된 JavaScript 객체에 불과: 실제 UI에 영향을 미치지 못함
- Reconciliation(재조정): 변경된 element만 실제 브라우저 화면에 적용
- 항상 2개의 가상DOM이 존재: 변경 이전 & 변경 이후
- 매번 DOM을 조작할때마다 브라우저 화면의 UI를 새롭게 그릴 필요가 없음
https://ko.legacy.reactjs.org/docs/faq-internals.html
조건부 삼항연산자( ? : )
value={inverted ? amount * 60 : amount}
- inverted가 true일 때: amount * 60 값을 value로 사용
- inverted가 false일 때: amount 값을 value로 사용
이전과 마찬가지로 변경된 값만 리렌더링되고 있다
km/miles 추가 👇
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
const [amount, setAmount] = React.useState("");
const [inverted, setInverted] = React.useState(false);
const [isTimeMode, setIsTimeMode] = React.useState(true); // state to track conversion mode
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount("");
const onFlip = () => {
reset();
setInverted((current) => !current);
};
const switchMode = (event) => { // Function to switch between Time and Distance modes
reset();
setIsTimeMode(event.target.value === "time"); // Set mode based on select value
setInverted(false); // Reset inverted state when switching mode
};
return(
<div>
<h1>Super Converter</h1>
<label htmlFor="modeSelect">Choose conversion type: </label>
<select id="modeSelect" onChange={switchMode}>
<option value="time">Minutes/Hours</option>
<option value="distance">Km/Miles</option>
</select>
{isTimeMode ? (
<div>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount * 60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={inverted}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={inverted ? amount : (amount / 60).toFixed(1)}
id="hours"
placeholder="Hours"
type="number"
disabled={!inverted}
onChange={onChange}
/>
</div>
</div>
) : (
<div>
<div>
<label htmlFor="km">Kilometers</label>
<input
value={inverted ? amount * 1.609 : amount}
id="km"
placeholder="Kilometers"
type="number"
onChange={onChange}
disabled={inverted}
/>
</div>
<div>
<label htmlFor="miles">Miles</label>
<input
value={inverted ? amount : (amount / 1.609).toFixed(2)}
id="miles"
placeholder="Miles"
type="number"
disabled={!inverted}
onChange={onChange}
/>
</div>
</div>
)}
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{inverted ? "Turn back" : "Invert"}</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] ReactJS: Create React App (1) | 2024.10.25 |
|---|---|
| [JavaScript] ReactJS: Props / React.memo (0) | 2024.10.24 |
| [JavaScript] ReactJS: STATE(1) (0) | 2024.10.21 |
| [JavaScript] ReactJS: Basics (0) | 2024.10.21 |
| [JavaScript] 크롬 앱 만들기: Weather (1) | 2024.09.11 |
