3. STATE
- 함수안에 랜더를 넣어줘서 리랜더링되게 해야 업데이트가 된다. 이거는 근데 별로 좋은 방법이 아니다.
랜더 다시 하면 전체를 다시 생성할 거라고 생각하지만 바뀐 부분만 재생산 해준다.
자동으로 리랜더링하는 방법을 찾아야 한다.
- useState로 data와 data를 바꿀 때 쓰는 함수가 든 배열을 받아온다. 근데 배열이어서 불편하다.
배열에서 어떻게 꺼낼까?
Const tomato = food[0] 이렇게 하면 불편쓰,,,
Const [myFacFood, mySecondFavFood] = food;modifier함수가 값을 받아 업데이트하고 ‘리랜더링’도 해준다.
근데 버그가 생겨서 결과가 이상하게 나올 수 있다.
setCounter(counter+1)이런 방법말고 다른 방법이 있다.
setCounter(current => current+1);
```이게 더 안전하다. 확실히 현재값이라는 것을 보장한다.
- jsx서는 for로 연결하면 안된다.
class대신 classnmae으로 해야하고 for대신 htmlfor이라고 해야 한다.
```html
{/* JS */}
<label for="minutes">Minutes</label>
<input class="minutes" id="minutes" placeholer="Minutes" type="number" />
{/* JSX */}
<label htmlFor="minutes">Minutes</label>
<input className="minutes" id="minutes" placeholer="Minutes" type="number" />input값이 필요하다.
바뀐 인풋값의 타겟에 뭐가 많은 데 그 중에서 value가 필요하다.
Math.round로 반올림가능
<!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>- ===로 비교한다.
- If 문 쓰느 법
flipped ? amount*60 : amountPROPS
부모 컨포넌트로부터 자식으로 데이터 보내느 거 만들거다.
function SaveBtn() {
return (
<button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>Save Changes</button>
)
}
function ConfirmBtn() {
return (
<button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>Confirm</button>
)
}
function App() {
return (
<div>
<SaveBtn />
<ConfirmBtn />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App/>, root);
- 부모의 props 전달
<Btn text="Save Changes"/>
<Btn text="Continue"/>- 자식이 props 받기
function Btn(props) {
return (
<button style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>{props.text}</button>
)
}
function Btn({text}) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>{text}</button>
)
}- props는 style에서도 사용가능
function Btn({text, fontSize}) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: fontSize
}}>{text}</button>
)
}
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={20}/>
<Btn text="Continue" fontSize={16}/>
</div>
);
}
개발데분꿈나무🌳