React learning #3 disabled, Invert,

today's learning point:

1. 사용자의 input을 어떻게 얻어오는지
2. form을 만들었을 때 state가 어떻게 작용하는지

 

state를 세팅하는 데는 2가지 방법이 있다.
1) 직접 할당 :setState(state +1)
2)함수를 할당:setState(state => state +1) (함수의 첫번째 인자는 현재 state 이다)

현재 state랑 관련이 없는 값을 새로운 state로 하고싶은 경우에는 (1),
현재 state에 조금의 변화를 주어서 새로운 state를 주고 싶은 경우에는 (2)

 

setCounter()에 값으로 넣을지 함수로 넣어줄지가 헷갈리신다면,
onClick 함수안에 여러번 넣어서 테스트해보시면 이해가 빠를 것 같습니다.

1. 값으로 여러번
function onClick() {
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
}  초기값이 0일 때 0+1하여 counter에 넣어줌 //1

2. 함수로 여러번
function onClick() {
setCounter(current => current+ 1); //current 초기 값이 0일 때 current값 1
setCounter(current => current+ 1);//current값1 +1
setCounter(current => current+ 1);//current값 2+1
setCounter(current => current+ 1);3+1
setCounter(current => current+ 1);4+1//5
}

1번으로 돌렸을 경우에는 setCounter를 몇번을 호출해도 한 번만 실행되는 걸 보실 수 있고(counter가 1만 증가)
2번으로 돌렸을 경우에는 setCounter가 호출된 만큼 counter가 증가된 걸 볼 수 있습니다.

 

jsx문법에서 

선점된 문법인  class , for그대로 사용하면 에러남

각각 className, htmlFor로 고쳐줘야함

 

 

 

react, reactdom을 import하는 script tag에서
production - > development 로 변경하는데
production은 배포 모드, development는 개발 모드를 의미합니다.
개발모드는 니코쌤이 보여준 것 처럼 버그로 이어질 수 있는 요소들을 미리 경고하는 검증 코드가 포함되어 있습니다.

 

 

miniutes를 받아서 hours로 바꾸기

 

onChange : input변화하는 것 감지

 

      function App() {
            const [minutes, setMinutes] = React.useState();
            const onChange = (event) => { //onChange로 값을 읽고 setMinutes로 값 나타내기
                setMinutes(event.target.value);
            };
            const reset = () => {
                setMinutes(0);
            };
            return (
                <div>
                    <h1>super converter</h1>
                    <div>
                        <label htmlFor="minutes">Minutes:</label>
                        <input
                            value={minutes}
                            onChange={onChange}
                            id="minutes"
                            placeholder="Minutes"
                            type="number"
                        />
                        <h3>you want to convert {minutes}</h3>
                    </div>
                    <div>
                        <label htmlFor="hours">Hours:</label>
                        <input
                            value={minutes / 60} //onChange속성이 없는 input은 값 입력안됨 
                            id="hours"
                            placeholder="Hours"
                            type="number"

                            disabled

                        />
                    </div>
                    <button onClick={reset}>Reset</button>
                </div>
            );
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);       

 

html에서는 input에 value속성이 지정된 것과 관계없이 입력이 가능한데

React에서는 value속성만 지정하면 입력이 되지않는 현상이있다.

value속성만 지정하면 value속성으로만 값을 컨트롤 할 수 있는 권한이 있기때문에

--> 이 때 onChange를 써서 input을 수정 할 수 있는 상태로 만들어 줘야한다.

 

 

 

flip

 

        function App() {
            const [minutes, setMinutes] = React.useState();
            const [flipped, setFlipped] = React.useState(false);
            const onChange = (event) => {
                setMinutes(event.target.value);
            };
            const reset = () => {
                setMinutes(0);
            };
            const onFlip = () => {
                setFlipped((current) => !current); //현재 값 이용
            };
            return (
                <div>
                    <h1>super converter</h1>
                    <div>
                        <label htmlFor="minutes">Minutes:</label>
                        <input
                            value={minutes}
                            onChange={onChange}
                            id="minutes"
                            placeholder="Minutes"
                            type="number"
                            disabled={flipped} // 같은말 disabled = {flipped ===true}
                        />
                        <h3>you want to convert {minutes}</h3>
                    </div>
                    <div>
                        <label htmlFor="hours">Hours:</label>
                        <input
                            value={minutes / 60}
                            id="hours"
                            placeholder="Hours"
                            type="number"
                            disabled={!flipped}  // 같은말 disabled = {flipped ===false}
                            onChange={onChange}
                        />
                    </div>
                    <button onClick={reset}>Reset</button>
                    <button onClick={onFlip}>Flipped</button>
                </div>
            );
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);

 

flip flase ture에 따라  기능 바꾸기 

 

 function App() {
            const [amount, setAmount] = React.useState(); // 헷갈리게 되서 이름변경
            const [flipped, setFlipped] = React.useState(false);
            const onChange = (event) => {
                setAmount(event.target.value);
            };
            const reset = () => {
                setAmount(0);
            };
            const onFlip = () => {
                reset();
                setFlipped((current) => !current);
            };
            return (
                <div>
                    <h1>super converter</h1>
                    <div>
                        <label htmlFor="minutes">Minutes:</label>
                        <input
                            value={flipped ? amount * 60 : amount}
                            onChange={onChange}
                            id="minutes"
                            placeholder="Minutes"
                            type="number"
                            disabled={flipped}
                        />
                    </div>
                    <div>
                        <label htmlFor="hours">Hours:</label>
                        <input
                            value={flipped ? amount : amount / 60}
                            id="hours"
                            placeholder="Hours"
                            type="number"
                            disabled={!flipped}
                            onChange={onChange}
                        />
                    </div>
                    <button onClick={reset}>Reset</button>
                    <button onClick={onFlip}>Flipped</button>
                </div>
            );
        }
        const root = document.getElementById("root");
        ReactDOM.render(<App />, root);

 

state바뀔 때마다 ui 새로 업데이트 됨 

 

 

컴포넌트 안에 컴포넌트 넣을 수 있다!

 

        function App() {
            return (
                <div>
                    <h1>Super Converter</h1>
                    <MinutesToHours />
                    <KmToMiles />
                </div>
            );
        }

 

        function KmToMiles() {
            return <h3>KM 2 MILE</h3>;
        }

        function App() {
            const [index, setIndex] = React.useState("xx");  //모두 string
            const onSelect = (event) => {
                setIndex(event.target.value);
            };
            return (
                <div>
                    <h1>Super Converter</h1>
                    <select value={index} onChange={onSelect}>
                        <option value="xx">Please Select option</option>
                        <option value="0">Minutes & Hours</option>
                        <option value="1">Km & Miles </option>
                    </select>
                    <hr />
                    {index === "0" ? <MinutesToHours /> : null} //{}curly bracket으로 jsx 문법 사용가능
                    {index === "1" ? <KmToMiles /> : null}
                </div>
            );
        }