카테고리 없음

[ReactJS] 시/분 변환기로 state 활용해보기 - 3, 확장과 분리

mswait 2022. 3. 6. 22:52

MinutesToHours, KmToMiles, App, 세개의 컴포넌트와 root를 가져와 App 컴포넌트를 넣어주는 부분을 분리해 주었다.

 

MinutesToHours() 컴포넌트는 이전의 작업했던 시/분 변환기의 내용을 그대로 담고있다.

KmToMiles() 컴포넌트가 새롭게 해주려는 것이다.

App() 컴포넌트에는 각각의 변환기를 선택할 수 있게끔 설정하려고 한다.

input에 value를 주는 것은 나중에 수정할 것을 염두에 두는 행위다.

 

ReactJS는 return 하는 괄호안에서 javascript를 쓰고 싶으면 {} 괄호를 열고 써주면 된다.

 

<!DOCTYPE html>
<html>
  <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/babel.min.js"></script>

  <script type="text/babel">
    function MinutesToHours() {
      const [amount, setAmount] = React.useState();
      const [inverted, setInverted] = React.useState(false);
      const onChange = (event) => {
        setAmount(event.target.value);
      };

      const reset = () => setAmount("");
      const onInverted = () => {
        reset();
        setInverted((current) => !current);
      };
      return (
        <div>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={inverted ? amount * 60 : amount}
              id="minutes"
              type="number"
              placeholder="Minutes"
              onChange={onChange}
              disabled={inverted === true}
            />
          </div>
          <div>
            <label htmlFor="hours">Hours</label>
            <input
              value={inverted ? amount : Math.round(amount / 60)}
              id="hours"
              placeholder="hours"
              disabled={inverted === false}
              onChange={onChange}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onInverted}>
            {inverted ? "Turn back" : "Invert"}
          </button>
        </div>
      );
    }
    function KmToMiles() {
      const [amount, setAmount] = React.useState();
      const [inverted, setInverted] = React.useState(false);
      const onChange = (event) => {
        setAmount(event.target.value);
      };

      const reset = () => setAmount("");
      const onInverted = () => {
        reset();
        setInverted((current) => !current);
      };
      return (
        <div>
          <div>
            <label htmlFor="kilometers">Kilometers</label>
            <input
              value={inverted ? amount * 1.609 : amount}
              id="kilometers"
              type="number"
              placeholder="Kilometer"
              onChange={onChange}
              disabled={inverted === true}
            />
          </div>
          <div>
            <label htmlFor="miles">Miles</label>
            <input
              value={inverted ? amount : amount / 1.609}
              id="miles"
              placeholder="miles"
              disabled={inverted === false}
              onChange={onChange}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onInverted}>
            {inverted ? "Turn back" : "Invert"}
          </button>
        </div>
      );
    }
    function App() {
      const [index, setIndex] = React.useState("xx");
      const onSelect = (event) => {
        setIndex(event.target.value);
      };
      return (
        <div>
          <h1>Super Converter</h1>
          <select value={index} onChange={onSelect}>
            <option value="xx">Select your units</option>
            <option value="0">Minutes & Hours</option>
            <option value="1">Km & Miles</option>
          </select>
          <hr />
          {index === "xx" ? "Please select your units" : null}
          {index === "0" ? <MinutesToHours /> : null}
          {index === "1" ? <KmToMiles /> : null}
        </div>
      );
    }

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

 

지금 하고 있는 건 index 의 변화를 listening 해주고 있는 것 뿐이지.

 

state를 사용할때 기억해야하는것은 modifier로 state를 수정해 주면 컴포넌트는 새로운 데이터와 함께 refresh 된다.