# 영화 리엑트 뭐시기 만들기 3.0~
state?
-> 기본적으로 데이터가 저장되는 곳
let counter = 0;
function countUp(){
counter += 1;
render();
}
function render(){
ReactDOM.render(<Container />, root);
}
JSX에서 변수는 그냥 {변수명}만 하면 됨. 매우 간단
변수의 값이 변하더라도, UI는 최신화가 되지 않아서 랜더를 수동으로 시켜주는 모습
React는 변한 부분만 업데이트함
const x = [1, 2, 3]
[a, b, c] = x >> a=x[0]; b=x[1]; c=x[2];
[1, 2, 3]
modifier
const [counter, setCounter] = React.useState(0); // [undefined, f]? 초기값 넣으면 [초기값, f]
const onClick = () => {
setCounter(counter + 1);
}
modifier함수를 가지고 state를 변경할 때, 컴포넌트가 재생성되고, 리렌더링된다.
리엑트 제공, 데이터가 바뀔때마다 컴포넌트를 리렌더 하고, UI를 새로고침
state가 바뀌면, react가 새로운 값을 가지고 컴포넌트를 refresh해준다. -> 리렌더링이 일어난다
//state를 바꾸는 2가지 방법?
1. setCounter을 설정해서 새 값을 넣는것
2. 이전 값을 이용해서 값을 계산해내는 것
const onClick = () => {
//setCounter(counter + 1);
setCounter((current) => current+1);
};
=> 후자의 경우, current값을 보장해주기 때문에 더 안전하다고 한다.
현재 state를 기반으로 다음 state를 계산하고 싶다면, 함수 이용
# 단위 변환?
그 전에 js의 예약어를 JSX에서 사용하지 않도록 주의하자
for, class 같은것들
function App(){
return(
<div>
<h1>Super Converter</h1>
<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(){
return(
<div>
<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input id="minutes" placeholder="Minutes" type="number" />
<label htmlFor="hours">Hours</label>
<input id="hours" placeholder="Hours" type="number" />
</div>
);
}
분->시 변환
event 콘솔에 뿌려보기.
event.target?
event.target.value?
onChange가 없으면 input의 값을 변경시킬 수 없음
<script type="text/babel">
const root = document.getElementById("root");
function App(){
const [minutes, setMinutes] = React.useState(0);
const onChange = (event) => {
setMinutes(event.target.value);
}
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>
<h4>You want to convert {minutes}</h4>
<label htmlFor="hours">Hours</label>
<input
value={Math.round(minutes / 60)}
id="hours"
placeholder="Hours"
type="number"
disabled
/>
</div>
<button onClick={reset}>Reset</button>
</div>
);
}
ReactDOM.render(<App />, root);
</script>
분/시 변환 flip?
js의 === 문법은 아직 잘 몰라서 이해가 필요할듯
분/시 변환 뿐만 아니라, KM/Mile 변환까지 추가하였음
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!-- JSX 를 컴퓨터가 이해하게 하기 위해 필요, type="text/babel" 로 해줘야 동작함-->
<script type="text/babel">
const root = document.getElementById("root");
function MinutesToHours(){
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 = () => setInverted(!inverted);
const onInvert = () => {
setInverted((current)=>!current);
reset();
}
return(
<div>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount * 60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
//disabled={inverted === true}
disabled={inverted}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={inverted ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
//disabled={inverted === false}
disabled={!inverted}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onInvert}>{inverted ? "Turn back" : "Invert"}</button>
</div>
);
}
function KmToMiles(){
const [amount, setAmount] = React.useState(0);
const [inverted, setInvert] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
}
const Reset = () => {
setAmount(0);
}
const invert = () => {
Reset();
setInvert((current) => !current);
}
return (
<div>
<div>
<h3>KM 2 M</h3>
<label htmlFor="KM">KM</label>
<input
id="KM"
value={inverted ? amount*1.609 : amount}
type="number"
onChange={onChange}
disabled={inverted}
/>
</div>
<div>
<label htmlFor="Mile">Mile</label>
<input
id="Mile"
value={inverted ? amount : amount / 1.609}
type="number"
onChange={onChange}
disabled={!inverted}
/>
</div>
<button onClick={Reset}>reset</button>
<button onClick={invert}>invert</button>
</div>
);
}
function App(){
const [index, setIndex] = React.useState("1"); // 일단 작업해야되는게 2번이니까
const onSelect = (event) => {
//console.log(event.target.value);
setIndex(event.target.value);
}
return (
<div>
<h1 className="hi">Super Converter</h1>
<select value={index} onChange={onSelect}>
<option value="xx">Select your units</option>
<option value="0">Minutes & Hours</option>
<option value="1">KM & Miles</option>
</select>
<hr />
{index === "xx" ? "Please select your units": null}
{index === "0" ? <MinutesToHours /> : null}
{index === "1" ? <KmToMiles /> : null}
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>
'공부 > ReactJS' 카테고리의 다른 글
| 노마드코딩 수강일지 07 / ReactJS #7 PRACTICE MOVIE APP (1) | 2022.12.24 |
|---|---|
| 노마드코딩 수강일지 06 / ReactJS #6 EFFECTS (0) | 2022.11.27 |
| 노마드코딩 수강일지 04 / ReactJS #5 노드 JS 설치, 환경 세팅 (0) | 2022.11.26 |
| 노마드코딩 수강일지 03 / ReactJS #4 PROPS, Memo (0) | 2022.11.20 |
| 노마드코딩 수강일지 01 / ReactJS #2 createElement, JSX, arrow function (0) | 2022.11.12 |
