Understanding State

state 상태
기본적으로 데이터가 저장되는 곳

setState

const data = React.useState();
console.log(data);

const data = React.useState(0);
console.log(data);

State Functions

state를 바꾸는 2가지 방법

1. setCounter를 이용해서 우리가 원하는 값을 넣어주는 것 (직접 설정)
2. 이전 값을 이용해서 현재 값을 계산 해내는 것 (함수 전달)

현재 state를 기반으로 계산을 하고 싶다면, 함수를 이용하는 거야.
그래서 다음 state의 값이 현재 값을 바탕으로 나올 수 있도록

set Counter 함수의 첫 번째 argument는 현재 값이다.

함수를 사용해서 계산하면 리액트가 이 current가 확실히 현재 값이라는 걸 보장하고 있기 때문에 두번째의 방법이 훨씬 안전함

   const [counter, setCounter] = React.useState(0);
        const onClick = () => {
          //  setCounter(5);
          setCounter(counter+1); // 이전 값을 바탕으로 현재 값을 설정해서 업데이트하기
          setCounter((current) => current + 1);
        }

Inputs ans State

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>
        )
    }

State Practive

props란?

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> &nbsp; 
                    <input
                        value={flipped? amount * 60 : amount}
                        id="minutes"
                        placeholder="Minutes"
                        type="number"
                        onChange={onChange} 
                        disabled={flipped}/>
                </div> <br />

                <div>
                    <label htmlFor="hours">hours</label> &nbsp; 
                    <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> &nbsp; 
                <button onClick={onFlip}>Flip</button>
            </div>
        )
    }

    ReactDOM.render(<App />, root);

Final practice