React.JS) React.JS - 3. 시간 계산기 App 만들기

Sep 20, 2024

Contents

1. 초기 상태


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
        return (
            <div>
                <h1>단위 계산기</h1>
            </div>
        );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

2. 시간, 분을 입력받을 수 있는 input 태그 만들기

JSX는 HTML 코드와 비슷함


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
        return (
            <div>
                <h1>단위 계산기</h1>
                <input placeholder="Minutes" type="number" />
                <input placeholder="Hours" type="number" />
            </div>
        );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

3. label 추가하기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
        return (
            <div>
                <h1>단위 계산기</h1>
                <label for="minutes">Minutes</label>
                <input id="minutes" placeholder="Minutes" type="number" />
                <label for="hours">Hours</label>
                <input id="hours" placeholder="Hours" type="number" />
            </div>
        );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

4. JS와 React.JS의 차이점

for은 JS가 사용하는 것으로 JSX에서는 틀렸음

for 속성 : JS에서 예약어로 사용 JSX에서는 htmlFor를 사용

class 속성: JS에서 예약어로 사용 JSX에서는 className을 사용해야 합니다.

이벤트 핸들러: 이벤트 이름이 카멜 케이스로 작성해야 함

style 속성: 객체 형태로 전달하고, CSS 속성도 카멜 케이스로 작성해야 함

자체 닫는 태그: HTML에서는 <img>같은 태그를 닫지 않아도 됨 JSX에서는 모든 태그가 닫혀 있어야 함

중괄호 {} 사용: JSX에서는 JS 표현식을 사용하려면 중괄호 {}로 감싸야 함

5. input의 value는 우리가 통제할 수 없으니 state 만들기

useState는 현재값이 첫번째 요소가 되는 배열을 제공해줌

input의 value와 state의 value가 같음


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
        const [minutes, setMinutes] = React.useState();
        const onChange = () => {
            console.log("누가 입력했어요~");
            
        };
        return (
            <div>
                <h1>단위 계산기</h1>
                <label htmlfor="minutes">Minutes</label>
                <input 
                    value={minutes}
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={onChange} />
                <label htmlfor="hours">Hours</label>
                <input id="hours" placeholder="Hours" type="number" />
            </div>
        );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

하나하나 입력이 될때마다 감지됨

6. input의 값 가져오기

JS처럼 event 사용하기

event 정보 가져오기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
        const [minutes, setMinutes] = React.useState();
        const onChange = (event) => {
            console.log(event);
            
        };
        return (
            <div>
                <h1>단위 계산기</h1>
                <label htmlfor="minutes">Minutes</label>
                <input 
                    value={minutes}
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={onChange} />
                <label htmlfor="hours">Hours</label>
                <input id="hours" placeholder="Hours" type="number" />
            </div>
        );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

event의 값 가져오기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
        const [minutes, setMinutes] = React.useState();
        const onChange = (event) => {
            console.log(event.target.value);
            
        };
        return (
            <div>
                <h1>단위 계산기</h1>
                <label htmlfor="minutes">Minutes</label>
                <input 
                    value={minutes}
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={onChange} />
                <label htmlfor="hours">Hours</label>
                <input id="hours" placeholder="Hours" type="number" />
            </div>
        );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

7. 화면에 값 띄우기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
    const [minutes, setMinutes] = React.useState("");
    const onChange = (event) => {
        setMinutes(event.target.value);
    };
    return (
        <div>
            <h1>단위 계산기</h1>
            <label htmlFor="minutes">Minutes</label>
            <input 
                value={minutes}
                id="minutes" 
                placeholder="Minutes" 
                type="number"
                onChange={onChange} />
            <h4>당신이 변환하길 원하는 분 단위는 {minutes}</h4>
            <label htmlFor="hours">Hours</label>
            <input id="hours" placeholder="Hours" type="number" />
        </div>
    );
}

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

8. 입력된 분을 시간으로 표시하기

시간 = 분 / 60


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
        const [minutes, setMinutes] = React.useState(0);
        const [hours, setHours] = React.useState(0);

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

        const handleHoursChange = (event) => {
            setHours(event.target.value);
        };

        return (
            <div>
                <h1>단위 계산기</h1>
                <label htmlFor="minutes">Minutes</label>
                <input 
                    value={minutes}
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={handleMinutesChange} />
                <h4>당신이 변환하길 원하는 분 단위는 {minutes}</h4>
                
                <label htmlFor="hours">Hours</label>
                <input 
                    value={minutes/60}
                    id="hours" 
                    placeholder="Hours" 
                    type="number"
                    onChange={handleHoursChange} />
                <h4>입력된 분이 시간 단위로는 {minutes/60}</h4>
            </div>
        );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

9. 반올림하기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
        const [minutes, setMinutes] = React.useState(0);
        const [hours, setHours] = React.useState(0);

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

        const handleHoursChange = (event) => {
            setHours(event.target.value);
        };

        return (
            <div>
                <h1>단위 계산기</h1>
                <label htmlFor="minutes">Minutes</label>
                <input 
                    value={minutes}
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={handleMinutesChange} />
                
                <label htmlFor="hours">Hours</label>
                <input 
                    value={Math.round(minutes/60)}
                    id="hours" 
                    placeholder="Hours" 
                    type="number"
                    onChange={handleHoursChange} />
            </div>
        );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

10. 초기화 버튼 추가하기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
        const [minutes, setMinutes] = React.useState(0);
        const [hours, setHours] = React.useState(0);

        const handleMinutesChange = (event) => {
            setMinutes(event.target.value);

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

        return (
            <div>
                <h1>단위 계산기</h1>
                <label htmlFor="minutes">Minutes</label>
                <input 
                    value={minutes}
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={handleMinutesChange} />
                
                <label htmlFor="hours">Hours</label>
                <input 
                    value={Math.round(minutes/60)}
                    id="hours" 
                    placeholder="Hours" 
                    type="number"
                    disabled} />
                <button onClick={reset}>초기화 </button>
            </div>
        );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

11. 전환하기

hours의 input의 상태를 false와 true로 전환하기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
        const [minutes, setMinutes] = React.useState(0);
        const [flipped, setFlipped] = React.useState(false);

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

        const reset = () => setMinutes(0);
        const onFlip = () => setFlipped((current) => !current);

        return (
            <div>
                <h1>단위 계산기</h1>
                <label htmlFor="minutes">Minutes</label>
                <input 
                    value={minutes}
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={handleMinutesChange} />
                
                <label htmlFor="hours">Hours</label>
                <input 
                    value={Math.round(minutes/60)}
                    id="hours" 
                    placeholder="Hours" 
                    type="number"
                    disabled = {true} />
                <button onClick={reset}>초기화</button>
                <button onClick={onFlip}>전환</button>
            </div>
        );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

minutes와 hours의 disabled 상태를 버튼으로 조절하기


<!DOCTYPE html>
<html lang="en">
<body>
    <div id="root"></div>
</body>

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

<script type="text/babel">
    function App() {
        const [minutes, setMinutes] = React.useState(0);
        const [flipped, setFlipped] = React.useState(false);

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

        const reset = () => setMinutes(0);
        const onFlip = () => setFlipped((current) => !current);

        return (
            <div>
                <h1>단위 계산기</h1>
                <label htmlFor="minutes">Minutes</label>
                <input 
                    value={minutes}
                    id="minutes" 
                    placeholder="Minutes" 
                    type="number"
                    onChange={handleMinutesChange}
                    disabled = {flipped === true} />
                
                <label htmlFor="hours">Hours</label>
                <input 
                    value={Math.round(minutes/60)}
                    id="hours" 
                    placeholder="Hours" 
                    type="number"
                    disabled = {flipped === false} /> // disabled = {!flipped} />와 같음
                <button onClick={reset}>초기화</button>
                <button onClick={onFlip}>전환</button>
            </div>
        );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
</script>
</html>

12. hours input에 입력하기

삼항 연산자 사용하기

minutes에 입력하면 hours는 변환된 값이 표시

minutes를 amount로 변경

hours에 입력하면 그 입력된 값이 표시


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    function App() {
      const [amount, setAmount] = React.useState(0);
      const [flipped, setFlipped] = React.useState(false);

      const handleMinutesChange = (event) => {
        setAmount(event.target.value);
      };

      const reset = () => setAmount(0);
      const onFlip = () => setFlipped((current) => !current);

      return (
        <div>
          <h1>단위 계산기</h1>
          <label htmlFor="minutes">Minutes</label>
          <input
            value={flipped ? amount * 60 : amount}
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={handleMinutesChange}
            disabled={flipped}
          />
          
          <label htmlFor="hours">Hours</label>
          <input
            value={flipped ? amount : amount / 60}
            id="hours"
            placeholder="Hours"
            type="number"
            disabled={!flipped}
          />
          
          <button onClick={reset}>초기화</button>
          <button onClick={onFlip}>전환</button>
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

onChange 함수로 minutes와 hours 사용하기


<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

  <script type="text/babel">
    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>단위 계산기</h1>
          <label htmlFor="minutes">Minutes</label>
          <input
            value={flipped ? amount * 60 : amount}
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={onChange}
            disabled={flipped}
          />
          
          <label htmlFor="hours">Hours</label>
          <input
            value={flipped ? amount : Math.round(amount / 60)}
            id="hours"
            placeholder="Hours"
            type="number"
            disabled={!flipped}
            onChange={onChange}
            />
          
          <button onClick={reset}>초기화</button>
          <button onClick={onFlip}>전환</button>
        </div>
      );
    }

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>