state 상태
기본적으로 데이터가 저장되는 곳
const data = React.useState();
console.log(data);
const data = React.useState(0);
console.log(data);
- setCounter를 이용해서 우리가 원하는 값을 넣어주는 것 (직접 설정)
- 이전 값을 이용해서 현재 값을 계산 해내는 것 (함수 전달)
현재 state를 기반으로 계산을 하고 싶다면, 함수를 이용하는 거야.
그래서 다음 state의 값이 현재 값을 바탕으로 나올 수 있도록
set Counter 함수의 첫 번째 argument는 현재 값이다.
함수를 사용해서 계산하면 리액트가 이 current가 확실히 현재 값이라는 걸 보장하고 있기 때문에 두번째의 방법이 훨씬 안전함
const [counter, setCounter] = React.useState(0);
const onClick = () => {
// setCounter(5);
setCounter(counter+1); // 이전 값을 바탕으로 현재 값을 설정해서 업데이트하기
setCounter((current) => current + 1);
}
function App() {
return (
<div>
<h1 class="hi">Super Converter</h1> // class 사용!
<label for="minutes">Minutes</label> // for 사용!
<input type="number" placeholder="Minutes" id="minutes"/>
<label for="hours">Hours</label> // for 사용!
<input type="number" placeholder="Hours" id="hours" />
</div>
);
}
이 안은 JSX이므로 html과 똑같이 작성하면 안된다.
예를들어 class나 for를 사용하면 안 된다.
이미 선점되어 있는 단어이기 때문이다.
class -> className
for -> htmlFor
이렇게 바꿔서 써야 한다.
React JS 세계에서는 이 input은 uncontrolled이라고 알려져 있다.
즉, 여기 input의 value는 우리가 통제할 수 없다는 것이다.
useState는 array를 제공한다.
function App(){
const [minutes, setMinutes] = React.useState();
const onChange = (event) => {
setMinutes(event.target.value);
}
return (
<div>
<h1 className="title">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input
value={minutes}
id="minutes"
placeholder="Minutes"
type="number"
onChange={onChange} />
<h4>You want to convert {minutes}</h4>
<label htmlFor="hours">hours</label>
<input id="hours" placeholder="Hours" type="number" />
</div>
)
}
property의 약자로, 부모에게 받아온 데이터이다.
리액트의 Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없다.
따라서 props에 있는 데이터들은 수정이 불가능하며 오직 안에 있는 값을 꺼내서 사용할 수만 있다.
function App(){
const [amount, setAmount] = React.useState(0);
const [flipped, setFlipped] = React.useState(false);
const onChange = (event) => {
setAmount(event.target.value);
}
const reset = (event) => setAmount(0);
const onFlip = () => {
reset();
setFlipped((current) => !current);
}
return (
<div>
<h1 className="title">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> <br />
<div>
<label htmlFor="hours">hours</label>
<input
value={flipped? amount : Math.round(amount / 60)}
id="hours"
placeholder="Hours"
type="number"
onChange={onChange}
disabled={!flipped} />
</div> <br />
<button onClick={reset}>Reset</button>
<button onClick={onFlip}>Flip</button>
</div>
)
}
ReactDOM.render(<App />, root);