React - Base(3)

React - 영화 웹 서비스 만들기(2) 에서 만들었던
분 -> 시 변환에 시 -> 분 변환을 추가

hours를 minutes로 변환하는 기능을 추가하기 위해 button 생성

<button onClick={onFlip}>Flip</button>

버튼을 클릭하면 변환 종류를 바꾸는 onFlip 함수가 실행

 	const [flipped, setFlipped] = React.useState(false);
	const onFlip = () => setFlipped((current) => !current);

onFlip은 분을 시간으로 변환할 것인지 시를 분으로 변환할 것인지를 판별하는 flipped 상태값을 toggle하는 함수

• flipped === false : minutes를 hours로 변환
• flipped === true : hours를 minutes로 변환
  
  

flipped 값에 따라 minutes 혹은 hours의 input을 비활성화하여 값만 출력되도록 input에 disabled 속성 추가

	<input ... id="minutes" disabled={flipped}/>
    <input ... id="hours" disabled={!flipped}/>

flipped에 따라 input의 값이 변환되어야 하는 값인지 입력된 값인지 바뀌기 때문에 해당 내용도 추가해주면

	<input ... 
    	value={flipped ? amount * 60 : amount}
        id="minutes" 
        disabled={flipped}
    />
    <input ... 
    	value={flipped ? amount : Math.round(amount / 60)}
    	id="hours" 
        disabled={!flipped}
    />

지금까지의 App의 내용을 MinutesToHours 컴포넌트로 분리하고 App에 컴포넌트를 추가하면 아래와 같이 코드가 완성된다.

const root = document.getElementById("root");
function MinutesToHours() {
    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>
            <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" 
                    onChange={onChange}
                    disabled={!flipped}
                />
            </div>
            <button onClick={reset}>Reset</button>
            <button onClick={onFlip}>Flip</button>
        </div>
    );
}

function App() {
   
    return(
        <div>
            <h1 className="hi">Super Converter</h1>
            <MinutesToHours />
        </div>
    );
}
ReactDOM.render(<App />, root);