니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.
부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!
출처 : https://nomadcoders.co/react-for-beginners
이전글에 이어,
[React] input state () - 단위변환기1 Warning : Invalid DOM property
이번에는 분을 입력하면 시로 출력,
반대로 시를 입력하면 분을 출력,
그리고 리셋 버튼을 붙여 단위변환기를 완성해보겠습니다.
1. 시 -> 분
- 이전 글에 이어 분을 입력할 경우 hours에서는 value값을 분/60으로 변환을 하여 출력해줍니다. 소수점을 반올림하고 싶을 경우 Math.round()를 사용하면 됩니다.
- 그리고 분에서는 값을 변경하지 못하게 일단 disabled를 추가해주었습니다.
<input
// value={minutes / 60}
value={Math.round(minutes / 60)} // 소수점 반올림
id="hours"
placeholder="Hours"
type="number"
disabled
/>
2. 리셋 기능
- 버튼에 onClick으로 minutes의 상태 값을 0으로 변경해줍니다.
const reset = () => setMinutes(0);
<button onClick={reset}>Reset</button>
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!--React js, DOM install-->
<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 App () {
const [minutes, setMinutes] = React.useState(0);
const onChange = (event) => {
setMinutes(event.target.value);
}
const [hours, setHours] = React.useState(0);
const reset = () => setMinutes(0);
return (
<div>
<h1 className="hi">Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
// value={minutes / 60}
value={Math.round(minutes / 60)} // 소수점 반올림
id="hours"
placeholder="Hours"
type="number"
disabled
/>
</div>
<button onClick={reset}>Reset</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App/>, root);
</script>
</html>
3. 분<-> 시
이제는 시 -> 분 뿐만 아니라 분 -> 시도 가능하게 코드를 짜보겠습니다.
방법은 여러가지가 있는데, state를 하나 더 사용해서 상태값을 이용해 좀 더 짧게 작성해보겠습니다.
전체 완성 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<!--React js, DOM install-->
<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 App () {
const [amount, setAmount] = React.useState(0); // 분, 초 상태
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
}
// flipped 상태 변경 / t -> f / f -> t
const onFlip = () => {
reset();
// const onFlip = () => setFlipped(!flipped);
setFlipped((current) => !current);
}
const [hours, setHours] = React.useState(0);
const reset = () => setAmount(0);
return (
<div>
<h1 className="hi">Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={flipped ? amount * 60 :amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
// disabled={flipped === true}
disabled={flipped}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={flipped ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
//disabled={flipped === false}
disabled={!flipped}
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{flipped ? "Minutes Converter" : "Hours Converter"}</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App/>, root);
</script>
</html>
우선, 기존에 사용했던 minute 상태를 분 뿐만 아니라 시에서 사용할 수 있게 amount로 명칭을 변경해주었습니다.
그리고, Flip(뒤집기) 버튼을 추가하여 설정한 flipped 상태가 true이면 false로, false이면 true로 변경할 수 있게 setFipped를 설정했습니다. 그냥 단순히 flipped값을 이용하지 않고 함수형태로 좀 더 안정적으로 작성하였습니다.
const [amount, setAmount] = React.useState(0); // 분, 초 상태
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
}
// flipped 상태 변경 / t -> f / f -> t
const onFlip = () => {
reset();
// const onFlip = () => setFlipped(!flipped);
setFlipped((current) => !current);
}
<button onClick={onFlip}>{flipped ? "Minutes Converter" : "Hours Converter"}</button>
그리고, disabled 값을 변수를 통해 true, false를 설정할 수 있는데 여기서는 앞의 상태 값인 flipped을 이용하였습니다.
# flipped : false
1) minutes - disabled : false로 분 입력 막기
2) hours - disabled : true로 시 입력 가능
# flipped : true
1) minutes - disabled : true로 분 입력 가능
2) hours - disabled : false로 시 입력 막기
value값은 삼항 연산자를 이용하여 각 상태에 따라 입력 값을 그냥 보여주거나 변환해서 보여줍니다.
<label htmlFor="minutes">Minutes</label>
<input
value={flipped ? amount * 60 :amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
// disabled={flipped === true}
disabled={flipped}
/>
<label htmlFor="hours">Hours</label>
<input
value={flipped ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
//disabled={flipped === false}
disabled={!flipped}
onChange={onChange}
/>
다음 글에서는 단위를 추가하여 조금 더 폭 넓은 단위변환기를 만들어보겠습니다.
[React] Divide : 작은 컴포넌트로 분할 - 단위변환기 3
읽어주셔서 감사합니다.
'Frontend > React' 카테고리의 다른 글
| [React] 단위변환기 완성 (minute&hours, km&miles) (0) | 2026.02.07 |
|---|---|
| [React] Divide : 작은 컴포넌트로 분할 - 단위변환기 3 (0) | 2026.02.07 |
| [React] input state () - 단위변환기1 Warning : Invalid DOM property (0) | 2026.02.02 |
| [React] State Functions (state 값 설정 방법 2가지) (0) | 2026.02.02 |
| [React] 컴포넌트 state (React.useState(), setState) (0) | 2026.01.30 |