코딩하는 김딸기
state실습- 시/분 단위 변환기 본문
-JSX는 HTML과 유사하지만 for, class등의 용어를 사용할 수 없고 htmlFor, className 등으로 사용해야 한다
function App() {
return (
<div>
<h3>super converter</h3>
<label for="minutes">minutes</label>
<input id="minutes" placeholder="minutes" type="number" />
<label for="hours">hours</label>
<input id="hours" placeholder="hours" type="number" />
</div>
);
}
function App() {
const [minutes, setMinutes] = React.useState(); //현재값 minuts과 이를 수정해주는 함수
<div>
<h3>super converter</h3>
<label for="minutes">minutes</label>
<input
value={minutes}
id="minutes"
placeholder="minutes"
type="number"
/>
<label for="hours">hours</label>
<input id="hours" placeholder="hours" type="number" />
</div>;
}
-사용자가 input에 새로운 값을 입력할 때마다 state업데이트하기 위해 onChange함수 추가
function App() {
const [minutes, setMinutes] = React.useState(); //현재값 minuts과 이를 수정해주는 함수
//state가 반환하는 배열의 첫번쨰 요소는 value, 두번쨰 값은 value를 수정하고 component를 새로고침할떄 쓰는 함수
const onChange = (event) => {
setMinutes(event.target.value);//인풋값으로 minutes값 업데이트 (이벤트 발생했을떄 값을 업데이트가소 UI에 출력)
};
return (
<div>
<h3>super converter</h3>
<label htmlFor="minutes">minutes</label>
<input
value={minutes} ->인풋값을 state값으로 설정
id="minutes"
placeholder="minutes"
type="number"
onChange={onChange} ->인풋값을 바꿀때마다 인풋값을 데이터값으로 업데이트해주는 함수 (이벤트 발생!)
/>
<h2>your input:{minutes}</h2>
<label htmlFor="hours">hours</label>
<input id="hours" placeholder="hours" type="number" />
</div>
);
}
-input의 value는 state이고 이 state의 디폴트 값은 설정가능하다
-만일 onChange함수가 없다면 인풋값에 값을 입력할 수 없다
const [minutes, setMinutes] = React.useState(0); //state초기값(minute)를 0으로 설정
-분단위 입력값을 시간단위로 변환하기
<script type="text/babel">
function App() {
const [minutes, setMinutes] = React.useState(0); //state초기값(minute)를 0으로 설정
//state가 반환하는 배열의 첫번쨰 요소는 value, 두번쨰 값은 value를 수정하고 component를 새로고침할떄 쓰는 함수
const onChange = (event) => {
setMinutes(event.target.value); //인풋값으로 minutes값 업데이트
};
return (
<div>
<h3>super converter</h3>
<label htmlFor="minutes">minutes</label>
<input
value={minutes}
id="minutes"
placeholder="minutes"
type="number"
onChange={onChange}
/>
<label htmlFor="hours">hours</label>
<input
value={minutes / 60}
id="hours"
placeholder="hours"
type="number"
onChange={onChange}
/>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
-모든 state값을 0으로 초기화하는 리셋 버튼 생성
const onChange = (event) => {
setMinutes(event.target.value); //인풋값으로 minutes값 업데이트
};
const reset = () => {
setMinutes(0); //state(minutes)를 0으로 바꾸는 함수
};
<button onClick={reset}>reset</button>
-시->분으로 변환하는 함수
-flip버튼을 누르면 onFlip함수가 실행됨-> onFlip함수는 현재의 값을(flipped, 초기값은 false)받아서 반대값을 출력함
-flip버튼을 누르면 hours를 사용한다는 의미
-flipped가 false면 hours는 disable됨 /true면 minutes가 disable됨
return (
<div>
<h3>super converter</h3>
<label htmlFor="minutes">minutes</label>
<input
value={flipped ? Math.round(minutes * 60) : minutes}
id="minutes"
placeholder="minutes"
type="number"
onChange={onChange}
disabled={flipped === true}
/>
<h2>your input:{minutes}</h2>
<label htmlFor="hours">hours</label>
<input
value={!flipped ? Math.round(minutes / 60) : minutes}
id="hours"
placeholder="hours"
type="number"
onChange={onChange}
disabled={flipped === false}
/>
<button onClick={reset}>reset</button>
<button onClick={onFlip}>flip</button>
분->시간
-3항 연산자를 사용해 flipped (===false)상태라면 분->시로 단위변환이 일어남 =>값이 60으로 곱해짐
시간->분
-3항 연산자를 사용해 flipped (===true)상태라면 시->분로 단위변환이 일어남 =>값이 60으로 나누어짐
정리
-flipped state에 따라서 인풋을 disable/ enable상태로 바꿀수 있다
-> flipped가 true->시에서 분으로 변환중인 상태 (분에서의 인풋은 disable 됨)
<input
value={flipped ? Math.round(minutes * 60) : minutes}
id="minutes"
placeholder="minutes"
type="number"
onChange={onChange}
disabled={flipped === true}
/>
<h2>your input:{minutes}</h2>
<label htmlFor="hours">hours</label>
<input
value={!flipped ? Math.round(minutes / 60) : minutes}
id="hours"
placeholder="hours"
type="number"
onChange={onChange}
disabled={flipped === false}
/>
-두가지 state인 flipped와 minutes 값에 따라 시에서분/ 분에서 시로 단위변환을 해줄수 있다.
최종코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<span id="root"></span>
</body>
<script type="text/babel">
function App() {
const [minutes, setMinutes] = React.useState(0); //state초기값(minute)를 0으로 설정
const [flipped, setFlipped] = React.useState(false);
//state가 반환하는 배열의 첫번쨰 요소는 value, 두번쨰 값은 value를 수정하고 component를 새로고침할떄 쓰는 함수
const onChange = (event) => {
setMinutes(event.target.value); //인풋값으로 minutes값 업데이트
};
const reset = () => {
setMinutes(0); //state(minutes)를 0으로 바꾸는 함수
};
const onFlip = () => {
reset();
setFlipped((current) => !current);
};
<button onClick={reset}>reset</button>;
<button onClick={flipped}>flip</button>;
return (
<div>
<h3>super converter</h3>
<label htmlFor="minutes">minutes</label>
<input
value={flipped ? Math.round(minutes * 60) : minutes}
id="minutes"
placeholder="minutes"
type="number"
onChange={onChange}
disabled={flipped === true}
/>
<h2>your input:{minutes}</h2>
<label htmlFor="hours">hours</label>
<input
value={!flipped ? Math.round(minutes / 60) : minutes}
id="hours"
placeholder="hours"
type="number"
onChange={onChange}
disabled={flipped === false}
/>
<button onClick={reset}>reset</button>
<button onClick={onFlip}>flip</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
분할정복(devide and conquer)
//App 함수(컴포넌트): root div를 그려주는 역할+ 2개의 컴포넌트를 렌더링함
//STATE를 통해 변환기 2개중 하나를 선택
function App() {
const [index, setInsex] = React.useState(0);
return (
<div>
<h3>super converter</h3>
<select>
<option>MinutesToHours</option>
<option>KmToMiles</option>
</select>
</div>
);
}
//컴포넌트는 내부에 다른 컴포넌트를 불러올 수 있다
//MinutesToHours 함수를 렌더링해 내부 요소들 사용 가능
//App 함수(컴포넌트): root div를 그려주는 역할+ 2개의 컴포넌트를 렌더링함
//STATE를 통해 변환기 2개중 하나를 선택
function App() {
const [index, setIndex] = React.useState("0"); //state초기값은 0(시분 컨버터)
//selec태그에 이벤트 리스너 함수추가
const onSelect = (event) => {
//console.log(event.target.value); // 해당 data를 state에 넣어야 함
setIndex(event.target.value); //인덱스 값 설정
};
return (
<div>
<h3>super converter</h3>
<select onChange={onSelect}>
<option value="0">MinutesToHours</option>
<option value="1">KmToMiles</option>
</select>
{index === "0" ? <MinutesToHours /> : null}
{index === "1" ? <KmToMiles /> : null}
</div>
);
}
//컴포넌트는 내부에 다른 컴포넌트를 불러올 수 있다
//MinutesToHours 함수를 렌더링해 내부 요소들 사용 가능
ReactDOM.render(<App />, root);
</script>
</html>
-select의 change이벤트를 리스닝해줌
-사용자가 번호를 선택하면 setIndex를 이용해(데이터 수정함수) 그 숫자를 state안에 넣음
-state 즉 index는 디폴트값 0으로 시작
-index값이 0이면 option의 value가 0인 경우가 되어 MinutesToHours 함수가 렌더링되어 출력됨
-index값이 1이면 option의 value가 1인 경우가 되어 KmToMiles 함수가 렌더링되어 출력됨
정리
-useState는 배열을 제공->데이터와 데이터값을 수정할 수 있는 함수
- 데이터값을 수정할 수 있는 modifier 함수를 실행하면 모든 컴포넌트들이 리렌더링됨