React (5) - Converter, 삼항연산자

* JSX, state활용한 단위 환산기 만들기 (분↔시간)

 

1. 분, 시간 입력 받는 input 작성

2. state을 활용한 입력값 전달

3. onChange event

4. reset / flip 버튼

 

    const root = document.querySelector("#root");

    function App() {
        const [minutes, setMinutes] = React.useState(0);
        const onChange = (event) => {
            setMinutes(event.target.value);
        };
        const Reset = () => setMinutes(0);
    
        return (
            <div>
                <h1 className="hi">Super Converter</h1>
                <div>
                    <label htmlFor="minutes">Minutes</label>
                    <input
                        value={minutes}
                        id="minutes"
                        placeholder="Minutes"
                        type="number"
                        onChange={onChange}
                    />
                </div>

                <div>
                    <label htmlFor="hours">Hours</label>
                    <input
                        value={Math.round(minutes / 60)}
                        id="hours"
                        placeholder="Hours"
                        type="number" 
                        disabled
                        />
                </div>
                <button onClick={Reset}>Reset</button>
            </div>
        );
    };

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

</script>

 

JSX	HTML
<h1 className="hi"> <label htmlFor="minutes">	<h1 class="hi"> <label for="minutes">

 

* const [minutes, setMinutes] = React.useState(0);   

 ㄴ [minutes, setMinutes]  =  [0,f]

  

* const onChange = (event) => {  setMinutes(event.target.value);  };            

ㄴ onChange 함수 발생할 때 input.value (event.target.value)가 자동 업데이트

     

* const Reset = () => setMinutes(0);                             

ㄴ minutes을 0으로 초기화 함수

 

---

* flip 버튼만들기 (시간을 분으로 환산 가능하게)

 

1. flip 버튼과 함수 만들기

2. 함수를 통해 새로운 state설정 - 기본값 false, 버튼을 누르면 false -> ture. true -> false 변경

3. input - disabled={flipped} 을 이용해서 활성/비활성으로 변경

4. 삼항연사자로 시간->분, 분->시간 변경가능하게 설정

 function App() {
        const [amount, setAmount] = React.useState(0);
        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 className="hi">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>

                <div>
                    <label htmlFor="hours">Hours</label>
                    <input
                        value={flipped ? amount : Math.round(amount / 60)}
                        id="hours"
                        placeholder="Hours"
                        type="number" 
                        disabled={!flipped}
                        onChange={onChange}

                        />
                </div>
                <button onClick={Reset}>Reset</button>
                <button onClick={onFlip}>{flipped ? "Turn back" : "Invert"}</button>
            </div>
        );
    };

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

</script>

 

 

* const onFlip = () => setFlipped(!flipped)

ㄴ flipped이 true면 false로 변경 / false면 true로 변경

ㄴ flipped 값이 예상치 못하게 업데이트 될 수 있으니 setFlipped((current)=>!current); 로 변경

 

* input disabled={}

ㄴ 초기 상태에서는 분->시간, flipped버튼 누른 후 시간->분 변경

ㄴ disabled에 true, false값을 줘서 활성/비활성 할 수 있음

ㄴ 기본값 false 이므로 minutes input에는 disabled={flipped===false}

    hours input에는 disabled={flipped===true}로 작성

ㄴ 더 짧고 좋게도 작성 가능! minuted, disabled={flipped} \\ hour, disabled={!flipped}

 

* 삼항 연산자

flipped ? amount * 60 : amount

flipped ? amount : amount / 60

ㄴ flipped이 false인 상태에서는 state값(amount)를 시간으로 변경해줘야 하고 

     true인 상태에서는 state값을 분으로 변경해줘야 하기 때문에 삼항연산자를 사용

ㄴ flipped ? ture실행 : false실행

 

1. flipped이 false(초기값)인 경우

가)  <input id="minutes"> 활성화된다. // 자동으로 hour는 비활성화
나)  flipped ? amount * 60 : amount  // flipped이 false 상태이므로 초기 amount 값(0)을 보여준다.
다)  input 칸에 change가 생기면 해당값은 amount에 저장한다. (setAmount : re-render)
가)  <Input id="hour"> 비활성화
라)  flipped ? amount : amount / 60 // fliiped이 false 상태이므로 amount/60 계산실행 (amount값은 입력값)

 

flip버튼 클릭 (false->ture), rest함수 발동!! (초기화)

 

2. flipped이 true인 경우

가)  <input id="mintued"> 비활성화
나)   flipped ? amount * 60 :  amount // flipped이 true 상태로 amount * 60 계산 실행 (초기값 0, 결과 0)
가)  <input id="hours"> 활성화
다)   flipped ? amount : amount / 60 // flipped이 true 상태로 초기값 amount 값(0)을 보여준다.
라)  input칸에 change가 생기면 해당값을 amount에 저장한다.  (setAmount : re-render)
마)  re-render되면서 코드 재실행, amount * 60 계산 실행