이번엔 state 가 뭔지 배우면서
분(minutes) <-> 시(hours) unit converter 를 만들 것이다.
#3. State
State 와 useState
state : 기본적으로 데이터가 저장되는 곳
useState 는 [value, modifier] 를 제공
value : 값을 저장하는 변수
modifier : value 값 변경이 가능하며 (직접 다시 render 할 필요 없이) 자동으로 re-render 해준다.
MinutesToHours Converter 구현하기 - (1) state 이용
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/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 [minutes, setMinutes] = React.useState(0);
const onChange = (event) => {
setMinutes(event.target.value);
};
const reset = () => {
setMinutes(0);
};
return (
<div>
<h1>Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholer="Minutes"
type="number"
onChange={onChange}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={Math.round(minutes/60)}
id="hours"
placeholer="Hours"
type="number"
/>
</div>
<button onClick={reset}>Reset</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App/>, root);
</script>
</html>
state 생성
초기값은 0 이며 setMinutes 로 값 변경이 가능하다.
onChange 함수 생성
event 값을 arg 로 받아서 현재 입력된 input 값이 무엇인지 확인할 수 있다 = event.target.value
reset 함수 생성
0 으로 초기화
화면에 보여질 값들
label : 사용자 인터페이스 항목의 설명
-> 여기서는 input 입력창에 대한 설명
minutes input 은 minutes 값을 value 로 갖고
입력 받을 때마다 onChange 수행
hours input 은 입력받은 minutes 값을 60 으로 나눈 (반올림도 한) 값을 value 로 갖는다.
onChange 가 없기 때문에 change 를 인식해도 변화는 X
reset button 은 클릭할 때마다 reset 을 실행해 0 으로 초기화
참고) JS 와 JSX
{/* JS */}
<label for="minutes">Minutes</label>
<input class="minutes" id="minutes" placeholer="Minutes" type="number" />
for, class, ... 의 property 는 자바스크립트에서 사용하는 것
{/* JSX */}
<label htmlFor="minutes">Minutes</label>
<input className="minutes" id="minutes" placeholer="Minutes" type="number" />
JSX 에서는 htmlFor, className, ... 으로 대체해야함
* 현재는 오류가 나지 않아도 나중에 오류 날 수 있으므로 꼭 대체해서 사용할 것
결과
120 분을 2 시간으로 변환 성공!
MinutesToHours Converter 구현하기 - (2) disabled 적용 & HoursToMinutes
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/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(0);
const [inverted, setInverted] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => {
setAmount(0);
};
const onInvert = () => {
reset();
setInverted((current) => !current);
};
return (
<div>
<h1>Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount * 60 : amount}
id="minutes"
placeholer="Minutes"
type="number"
onChange={onChange}
disabled={inverted === true}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={inverted ? amount : Math.round(amount/60)}
id="hours"
placeholer="Hours"
type="number"
onChange={onChange}
disabled={inverted === false}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{inverted ? "Turn Back" : "Invert"}</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App/>, root);
</script>
</html>
inverted 추가
초기값은 false
onInvert 함수 추가
Invert 버튼을 눌렀을 때 실행되는 함수
분 -> 시 converter 였다면 amount 를 0 으로 초기화하고 시 -> 분 converter 로 설정되도록 함
(true -> false, false -> true)
참고) useState 를 이용한 State 설정 방법
1. 값 이용
5646, 674, "10", ... 처럼 정해진 값 ex) setCounter(5674);
또는
이전 값을 바탕으로 새로운 값 ex) setCounter(counter + 1);
으로 직접 value 지정
2. 함수 이용
(current) => ~ 형식으로 현재 값을 받아와서 사용
ex) setCounter((current) => current + 1);
함수를 이용하는 것이 더 안전하다.
current 가 확실히 현재 값이라는 것을 보장하기 때문
(어디선가 예상치 못한 업데이트가 일어나더라도 혼동 방지)
Invert 버튼 추가
삼항연산자 이용
inverted 가 false 라면 Invert 할 수 있도록 하고
inverted 가 true 라면 이미 Invert 된 상태이니까 다시 돌아가도록 Turn Back
결과
MinutesToHours 와 HoursToMinutes Converter 를 완성했다.
useState & 함수로 current 값을 받아와 새로운 값을 만들어 낸다는 것 중요!!
다음엔 KmToMiles Converter 도 만들어서
선택한 Converter 를 보여주도록 구현할 것이다.
'FrontEnd > React' 카테고리의 다른 글
| [ReactJS] Effect - ReactJS 로 영화 웹 서비스 만들기 (6) (0) | 2021.12.02 |
|---|---|
| [ReactJS] Create React App - ReactJS 로 영화 웹 서비스 만들기 (5) (0) | 2021.11.26 |
| [ReactJS] Props - ReactJS 로 영화 웹 서비스 만들기 (4) (0) | 2021.11.26 |
| [ReactJS] Unit Converter 완성 - ReactJS 로 영화 웹 서비스 만들기 (3) (0) | 2021.11.25 |
| [ReactJS] Introduction & The Basics of React - ReactJS 로 영화 웹 서비스 만들기 (1) (0) | 2021.11.24 |
댓글