✏️ 더 나은 state 변경 방법
setCounter() 안에 함수로 작성
들어가는 값은 현재값, return 값은 변경되는 값
현재 들어가는 값을 가지고 값이 변경되도록 안전하게 함수 사용setCounter(counter + 1); //직접할당 setCounter((current) => current + 1); //함수 할당
※ jsx에서는 쓰면 안되는 javaScript 용어
: class -> className
for -> htmlFor
value={minutes} 하는 이유는 state 업데이트 함수 통해 변경되면 그 결과를 value에 바로바로 적용해서 외부에서도 해당 위치 접근으로 수정해주기 위함
change 일어났을 때 onChange 함수 실행됨
✏️ element 안에 onClick 실행되면 {} 안에 있는 함수가 실행된다는 의미
<button onClick={reset}>Reset</button>🖥️ 코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<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);
//flip 버튼에 사용하기 위한 state 하나 더 정의
const [inverted, setInverted] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
};
const reset = () => setAmount(0);
//const onFlip = () => setInverted(!inverted); 밑에 더 좋은 방법
const onFlip = () => {
reset();
setInverted((current) => !current);
};
return (
<div>
<h1 className="hi">Super Converter</h1>
<div>
<label htmlFor="minutes">Minutes</label>
<input
value={inverted ? amount * 60 : amount}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange}
disabled={inverted}
/>
</div>
<div>
<label htmlFor="hours">Hours</label>
<input
value={inverted ? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
disabled={!inverted}
onChange={onChange}
/>
</div>
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>{inverted ? "Turn back" : "Invert"}</button>
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
- userState(0)로 amont를 0으로 초기화한 상태
- setAmount로 amount를 event.target.value로 바꿔주거나 reset을 통해 호출됨
- 함수의 return에 JSX 넣어줘서 만듦
- 마지막 ReactDom.render를 통해 root 요소 안에 App 컴포넌트를 넣어서 렌더링해줌
✏️ 컴포넌트 안에 또다른 컴포넌트 넣기
<script type="text/babel">
function MinutesToHours() { //위의 App과 동일.. }
function App() {
return (
<div>
<h1>Super Converter</h1>
<MinutesToHours />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>- App 컴포넌트는 div 요소를 만들고, h1 요소를 만들고, 또 다른 minutesToHours 컴포넌트도 만들어서 그 안의 모든 요소를 그려주고 있음
- Divide and Conquer
⚠️ 컴포넌트 반드시 대문자!!!!
✏️ 컴포넌트 안에 JSX 사용
- 중괄호 안에 쓰면 js가 됨
- 인덱스의 변화를 리스닝함
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>
);
}