useState를 이용해 단위변환 기능 만들기

배웠던걸 기반으로 useState를 이용해 단위변환 기능을 만들어보자. 

 

먼저 input에 입력한 값이 화면에 실시간으로 보이도록 만들어보자.

onChange를 통해 사용자가 다른 값을 입력할 때마다 value 업데이트 시킨다.

const App = () => {
      const [minutes, setMinutes] = React.useState(0);
      const onChange = (e) => {
        setMinutes(e.target.value);
      };
      return (
        <div>
          <h1>Super Converter</h1>
          <label htmlFor="minutes">Minutes</label>
          <input
            value={minutes}
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={onChange}
          />
          <h4>You want to convert {minutes}</h4>
          <label htmlFor="hours">Hours</label>
          <input id="hours" placeholder="Hours" type="number" />
        </div>
      );
    };

input의 value를 연결시켜주는 이유는 input 값을 외부에서 수정해주기 위해서다. 

label에서 for은 js용어가 아니므로 htmlFor이라 써줘야한다. class도 동일한 이유로 className로 써줘야한다.

 

단위 변환해주는 기능을 넣어보자.

const App = () => {
      const [minutes, setMinutes] = React.useState(0);
      const reset = () => setMinutes(0);
      return (
        <div>
          <h1>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={minutes / 60}
              id="hours"
              placeholder="Hours"
              type="number"
            />
          </div>
        </div>
      );
    };

hour부분은 onChange evnet가 없으므로 수정이 안되고 value값으로 고정된다.

reset버튼을 만들려면 다음 코드를 추가하면 된다.

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

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

 

단위 변환을 뒤집어보는 함수를 만들어보자. inverted라는 useState함수를 만들고, Intert 버튼을 누를 때마다 boolean값을 뒤집는다. boolean값을 이용해 작동하는 기능을 달리하면 된다.

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

 

메뉴를 이용해 사용자가 원하는 단위변환기를 선택하도록 해보자. 먼저 컴포넌트들로 분할해주자.

위에서 작성했던 컴포넌트는 MinutesToHours라는 컴포넌트로 분할, 새로 만들 단위 변환기는 KmToMiles, 그리고 우리의 root div를 그려주는 App.js의 세개의 컴포넌트로 분할해주자.

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

    const App = () => {
      return (
        <div>
          <h1>Super Converter</h1>
          <MinutesToHours />
          <KmToMiles />
        </div>
      );
    };

 

두 단위 변환기가 한 페이지에 같이 있다. 이를 메뉴를 통해 나눠보자. index라는 useState를 만들어, index 값에따라 화면이 달리하도록 하자.

const App = () => {
      const [index, setIndex] = React.useState("xx");
      const onSelect = (e) => {
        setIndex(e.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>
      );
    };

선택한 옵션에 따라 보이는 화면이 달라짐을 확인할 수 있다.

 

 

 

 

참고 : NomadCoders - ReactJS로 영화 웹 서비스 만들기 강좌