[노마드/React로 영화 웹 서비스 만들기] Ch03 STATE | 6. State Practice part One

참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby

1.  minutes를 입력하면 hourse단위로 계산해서 출력해주자!

---

<script type="text/babel">
    function App() { 
        const [minutes, setMinutes] = React.useState()
        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"
                    />
                </div>
                <button onClick={reset}>Reset</button>
            </div>
        );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root); 
</script>

👉🏻먼저 전체 코드이다! 하나씩 살펴보자

 

분단위를 시단위로 바꿔주기

---

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

• value에 minutes state를 60으로 나눈 값을 넣어준다. 

✍🏻Math. round: 소숫점을 반올림해준다.

 

reset 버튼을 만들어준다.

---

<button onClick={reset}>Reset</button>

• 클릭하면 reset 함수를 호출하는 리셋버튼을 만들어준다.

const reset = () => setMinutes(0);

• setMinutes를 통해 minutes state를 0으로 초기화한다.

시 단위로 잘 변경해주고 reset 버튼도 잘 작동한다.