[노마드/ReactJS 영화 웹 만들기] - Ch03 | 6~7 State prac

Flip

input에 disabled를 사용하여 활성화 및 비활성화를 지정해 줄 수 있다. 

filpped와 setFlipped라는 변수를 만들고 불리언 값을 준다.

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

• flipped가 true라면 부정명제인 !flipped는 fals
• false라면 true

state값으로 input을 enabled할지 disabled 할지를 결정할 수 있다. 초기값이 false라고 정했으므로, Hours는 disabled 되어야 한다.

때문에 disabled={flipped === false}를 넣어줘서 flipped가 false라면, disabled는 true가 되도록 만들어주는 것이다. 짧게는 {!filpped}

<div>
    <lable htmlFor="hours">시간</lable>
    <input
        value={Math.round(amount / 60)}
        id="hours"
        placeholder="시간"
        type="number"
        onChange={onChange}
        disabled={!flipped}
    />
</div>

Minuets에는 반대로 disabled={flipped === true}라고 써준다. 짧게는 {flipped}

<div>
    <lable htmlFor="minutes">분</lable>
    <input
        value={amount}
        id="minutes"
        placeholder="분"
        type="number"
        onChange={onChange}
        disabled={flipped}
    />
</div>

지금까지 분에서 시간으로 컨버터 시키는 기능을 넣었지만, 위 Filpped로 시간에서 분 컨버터를 만들어 줄 수도 있다.

삼항연산자(ternary operator)를 사용하여 아래와 같이 input의 value를 수정해 준다.

value={flipped ? amount * 60 : amount}

<div>
    <lable htmlFor="minutes">분</lable>
    <input
        value={flipped ? amount * 60 : amount}
        id="minutes"
        placeholder="분"
        type="number"
        onChange={onChange}
        disabled={flipped}
    />
</div>

ㄴ flipped 상태면 60으로 곱한 변환된 값 보여주고, 아니라면 state에 있는 값을 그대로 보여줌

---

value={flipped ? amount : Math.round(amount / 60)}

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

ㄴ flipped 상태면 state에 있는 값을 그대로 보여주고, 아니라면 60으로 나눈 변환된 값 보여줌.
그리고 반대로 계산 버튼을 누르면 변화된 값 그대로 가져오기 때문에 onFlip 변수에 reset()을 넣으면 된다.

<script type="text/babel">
    const root = document.getElementById('root');
    function App() {
        const [amount, setAmount] = React.useState(0);
        const [flipped, setFlipped] = React.useState(false);
        const onChange = (event) => {
            setAmount(event.target.value);
        };
        const onFlip = () => {
            reset();
            setFlipped((current) => !current);
        };
        const reset = () => setAmount(0); //초기화 함수
        return (
            <div>
                <h1>계산기</h1>
                <div>
                    <lable htmlFor="minutes">분</lable>
                    <input
                        value={flipped ? amount * 60 : amount}
                        id="minutes"
                        placeholder="분"
                        type="number"
                        onChange={onChange}
                        disabled={flipped}
                    />
                </div>
                <div>
                    <lable htmlFor="hours">시간</lable>
                    <input
                        value={flipped ? amount : Math.round(amount / 60)}
                        id="hours"
                        placeholder="시간"
                        type="number"
                        onChange={onChange}
                        disabled={!flipped}
                    />
                </div>
                <button onClick={reset}>초기화</button>
                <button onClick={onFlip}>반대로 계산 </button>
            </div>
        );
    }

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

 

 

 

깃허브 자료

GitHub - Seogun95/Movie-web-servic-ReactJS: ReactJS로 영화 웹 서비스 만들기 노마드 코더 클론 코딩