(강의내용을 create-react-app으로 실행함 - ❌강의 코드 아님❌)
function Container() {
let [counter, setCounter] = useState(0);
return(
<>
<h3>Total clicks: {counter}</h3>
<button onClick={()=>{
//setCounter(counter + 1);
//이전 값을 바탕으로 현재 값을 업데이트할 때, 위 방법보다는 아래처럼 함수를 만드는 게 좋다. current가 현재 값이라는 것을 확실하게 보장해주기 때문. 혹시 모를 오류를 방지할 수 있음.
setCounter((current)=> current + 1);
}}>Click me</button>
</>
)
}
function App() {
return (
<>
<Container ></Container>
</>
);
}
분 ↔ 시 단위환산 프로그램 만들기
function App() {
const [minutes, setMinutes] = useState(0);
const onChange = (event) => {
//console.log(event.target.value);
setMinutes(event.target.value);
}
return (
<>
<h1>Super Converter</h1>
{/* for은 자바스크립트 예약어기 때문에 react에서는 htmlFor를 사용해야 한다. */}
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
type="number"
placeholder="Minutes"
// onChange로 사용자가 input의 value를 수정할 때마다 listen
onChange={onChange}
/>
<h4>You want to convert {minutes}</h4>
<label htmlFor="hours">Hours</label>
<input
id="hours" type="number"
placeholder="Hours" />
</>
);
}
return (
<>
<h1>Super Converter</h1>
{/* for은 자바스크립트 예약어기 때문에 react에서는 htmlFor를 사용해야 한다. */}
<>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
type="number"
placeholder="Minutes"
// onChange로 사용자가 input의 value를 수정할 때마다 listen
onChange={onChange}
/>
</>
<>
<label htmlFor="hours">Hours</label>
<input
value={minutes}
id="hours" type="number"
placeholder="Hours" />
</>
</>
);
아래와 같은 Warning 뜸.
Warning: You provided a
value
prop to a form field without anonChange
handler. This will render a read-only field. If the field should be mutable usedefaultValue
. Otherwise, set eitheronChange
orreadOnly
.
단위 변환을 뒤집는 flip function을 만들어보자.
function App() {
const [amount, setAmount] = useState(0);
const [inverted, setInverted] = useState(false);
const onChange = (event) => {
//console.log(event.target.value);
setAmount(event.target.value);
}
const reset = () => setAmount(0);
const onInvert = () => {
reset();
setInverted((current)=> !current);
}
return (
<>
<h1>Super Converter</h1>
{/* for은 자바스크립트 예약어기 때문에 react에서는 htmlFor를 사용해야 한다. */}
<>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount*60 : amount}
id="minutes"
type="number"
placeholder="Minutes"
// onChange로 사용자가 input의 value를 수정할 때마다 listen
onChange={onChange}
disabled={inverted}
/>
</>
<>
<label htmlFor="hours">Hours</label>
<input
//inverted상태에서는 사용자가 입력한 값, inverted되지 않은 상태에서는 분을 환산한 값
value={inverted ? amount : amount/60}
id="hours" type="number"
placeholder="Hours"
onChange={onChange}
disabled={!inverted}
/>
</>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
</>
);
}
import './App.css';
import { useState } from 'react';
function MinutesToHours() {
const [amount, setAmount] = useState(0);
const [inverted, setInverted] = useState(false);
const onChange = (event) => {
//console.log(event.target.value);
setAmount(event.target.value);
}
const reset = () => setAmount(0);
const onInvert = () => {
reset();
setInverted((current)=> !current);
}
return (
<>
<>
{/* for은 자바스크립트 예약어기 때문에 react에서는 htmlFor를 사용해야 한다. */}
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount*60 : amount}
id="minutes"
type="number"
placeholder="Minutes"
// onChange로 사용자가 input의 value를 수정할 때마다 listen
onChange={onChange}
disabled={inverted}
/>
</>
<>
<label htmlFor="hours">Hours</label>
<input
//inverted상태에서는 사용자가 입력한 값, inverted되지 않은 상태에서는 분을 환산한 값
value={inverted ? amount : amount/60}
id="hours" type="number"
placeholder="Hours"
onChange={onChange}
disabled={!inverted}
/>
</>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
</>
);
}
function KmToMiles() {
const [amount, setAmount] = useState(0);
const [inverted, setInverted] = useState(false);
const onChange = (event) => {
//console.log(event.target.value);
setAmount(event.target.value);
}
const reset = () => setAmount(0);
const onInvert = () => {
reset();
setInverted((current)=> !current);
}
return (
<>
<>
{/* for은 자바스크립트 예약어기 때문에 react에서는 htmlFor를 사용해야 한다. */}
<label htmlFor="km">Km</label>
<input
value={inverted ? amount*1.60934 : amount}
id="km"
type="number"
placeholder="Km"
// onChange로 사용자가 input의 value를 수정할 때마다 listen
onChange={onChange}
disabled={inverted}
/>
</>
<>
<label htmlFor="miles">miles</label>
<input
//inverted상태에서는 사용자가 입력한 값, inverted되지 않은 상태에서는 분을 환산한 값
value={inverted ? amount : amount/1.60934}
id="miles" type="number"
placeholder="miles"
onChange={onChange}
disabled={!inverted}
/>
</>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
</>
);
}
function App() {
const [index, setIndex] = useState("xx");
const onSelect = (event) => {
setIndex(event.target.value);
}
return (
<>
<h1>Super Converter</h1>
<select onChange={onSelect}>
<option value="xx">Select your units</option>
<option value="0">Minutes & Hours</option>
<option value="1">Km & Miles</option>
</select>
<hr></hr>
{index === "xx" ? "Please select your units" : null}
{index === "0" ? <MinutesToHours/> : null}
{index === "1" ? <KmToMiles/> : null}
</>
);
}
export default App;