3.5~3.6
html
<label> : form에 question 추가할 수 있음, <input>과 함께 사용
<label for="profile">Profile Photo</label>
<input id="profile" type="file" accept=".png" />📌
<label>태그의 for 속성Profile Photo
- 'Profile Photo'라는 텍스트 클릭하면 파일 선택창이 나옴
*질문을 클릭하면 체크박스에 체크되게끔 하는 input 넣을 때 유용
📌 JSX에서는 class, for은 이미 선점된 용어이기 때문에 className, htmlFor로 사용해야함
✍ n분을 n시간으로 바꿔주는 계산기 만들기
<script type="text/babel"> const root = document.getElementById("root"); function App() { const [minutes, setMinutes] = React.useState(); const onChange = (event) => { setMinutes(event.target.value); //minutes 값을 event.target.value로 업데이트함 }; return ( <div> <h1>Super Converter</h1> <label htmlFor="minutes">Minutes</label> <input value={minutes} // state(상태값) id="minutes" placeholder="Minutes" type="number" onChange={onChange} // input의 change를 감지하는 eventListener /> <h1>You want to convert {minutes}</h1> </div> ); }
input의 change를 감지하면onChange함수가 실행onChange함수는setMinutes함수로minutes값(상태값)을event.target.value(input의 입력값)으로 업데이트함 =>App()component를 rerender
*minutes는 결국event.target.value가 되는거지...맞지...?value={minutes}처럼 input의 value를 state와 연결해주는 이유는 input value를 외부에서도 수정할 수 있도록 하기 위해서
e.g. reset 버튼을 만드는 경우 등등
<script type="text/babel"> const root = document.getElementById("root"); function App() { const [minutes, setMinutes] = React.useState(); const onChange = (event) => { setMinutes(event.target.value); //minutes 값을 event.target.value로 업데이트함 }; const reset = () => setMinutes(0); return ( <div> <h1>Super Converter</h1> <div> <label htmlFor="minutes">Minutes</label> <input value={minutes} id="minutes" placeholder="Minutes" type="number" onChange={onChange} // input의 change를 감지하는 eventListener /> </div> <div> <label htmlFor="hours">Hours</label> <input value={Math.round(minutes / 60)} id="hours" placeholder="Hours" type="number" /> </div> <button onClick={reset}>Reset</button> </div> ); }
- Hours input의 value는
{Math.round(minutes / 60)} - Hours input에 값을 입력해도 입력되지 않음
onClick이벤트를 감지하면reset함수를 실행하는 reset button은setMinutes함수를 통해 minutes 값을 0으로 변경
# 3.7 ~ 3.8
✍ disabled 속성이 뒤바뀌는 Flip 버튼 만들기
function App() { const [minutes, setMinutes] = React.useState(); const [flipped, setFlipped] = React.useState(false); const onChange = (event) => { setMinutes(event.target.value); }; const reset = () => setMinutes(0); const onFlip = () => setFlipped((current) => !current); return ( <div> <h1>Super Converter</h1> <div> <label htmlFor="minutes">Minutes</label> <input value={minutes} id="minutes" placeholder="Minutes" type="number" onChange={onChange} disabled={flipped} /> </div> <div> <label htmlFor="hours">Hours</label> <input value={Math.round(minutes / 60)} id="hours" placeholder="Hours" type="number" disabled={!flipped} /> </div> <button onClick={reset}>Reset</button> <button onClick={onFlip}>Flip</button> </div> ); }
const [flipped, setFlipped] = React.useState(false);로flipped를 false로 선언const onFlip = () => setFlipped((current) => !current);로 현재값의 반대값을flipped값으로 return 하는 함수 선언
❌ setState 함수의 인수인current값은 state를 의미하는 것인가..?- 아무것도 안누른 상태에서 Hours input의
disabled속성은 true, Minutes input은 false (flipped의 디폴트값이 false이기 때문에) - Flip 버튼을 클릭하면
onFlip함수 실행 ->setFlipped함수 실행 ->flipped= true -> input들의disabled속성값 뒤집힘
✍ n시간을 n분으로도 바꿀 수 있도록 만들기
function App() { const [amount, setAmount] = React.useState(); const [flipped, setFlipped] = React.useState(false); const onChange = (event) => { setAmount(event.target.value); }; const reset = () => setAmount(0); const onFlip = () => { reset(); setFlipped((current) => !current); }; return ( <div> <h1>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} /> </div> <div> <label htmlFor="hours">Hours</label> <input value={flipped ? amount : Math.round(amount / 60)} id="hours" placeholder="Hours" type="number" disabled={!flipped} onChange={onChange} /> </div> <button onClick={reset}>Reset</button> <button onClick={onFlip}>Flip</button> </div> ); }
- Hours input에도
onChangeeventListener 추가
*onChange함수는 input에 입력된 값을 상태값으로 반환하는 함수!
->입력받은 값이 화면에 보여지도록
✍ input이 활성화 되었을 때 / 비활성화 되었을 때 값을 다르게 보여줘야 함
flipped = false 일 때? 분으로 변환한 시간 보여주기
flipped = true 일 때 ? Hours input의 값을 그대로 보여주기
Ternary Operator (삼항연산자)
condition ? value1 : value2 // condition이 true이면 value1 반환, false이면 value2 반환
- Hours input의
value를{flipped ? amount : Math.round(amount / 60)}로 수정
*여기서 첫 번째 useState를[amount, setAmount]로 수정 - Minutes input의 value는
{flipped ? amount * 60 : amount} - Flip 버튼 클릭했을 때 input 활성화 뒤집히면서 입력값 reset 되도록
onFlip함수에reset();코드 추가
Flip 되었는지 더 확실하게 하려면 Button의 텍스트를 다르게 보여줄 수도 있음
<button onClick={onFlip}>{flipped ? "Turn Back" : "Flip"}</button>
# 3.9
✍ option의 value에 따라 다른 UI를 보여주도록 만들기
*분할정복(divide and conquer)
function MinutesToHours() {...
}
function KmToMiles() {
return <h3>KM to Miles</h3>;
}
function App() {
const [index, setIndex] = React.useState("0");
const onSelect = (event) => {
setIndex(event.target.value);
};
return (
<div>
<h1>Super Converter</h1>
<select value={index} onChange={onSelect}>
<option value="0">Minutes & Hours</option>
<option value="1">Km & Miles</option>
</select>
{index === "0" ? <MinutesToHours /> : null}
{index === "1" ? <KmToMiles /> : null}
</div>
);
}<select>: html tag.<option>과 함께 쓰이며 선택 보기 제공.<select>태그의 onChange를 감지하는 eventListener(onSelect) 추가 => onSelect 함수는 setIndex 함수를 사용해index값을 event가 발생한 target의 value로 업데이트하고 UI를 새로 불러옴- onchange 발생 -> onSelect 실행 -> event.target.value 확인 -> index 값 변경 -> { } 안에 있는 삼항연산자에 따라 index 값에 해당하는
MinutesToHours()와KmToMiles()중 하나 반환
*나중에 수정할 경우를 위해 select에도 value 부여
차근차근 천천히