React/개념

useState, onChange(2)

하로이 2022. 10. 4. 23:24 
<!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 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> Super Converter</h1>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={flipped ? amount * 60 : amount}
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={onChange}
              disabled={flipped}
            />
          </div>
          <div>
            <label htmlFor="hours">Hours</label>
            <input
              value={flipped ? amount : Math.round(amount / 60)}
              id="hours"
              placeholder="Hours"
              type="number"
              disabled={!flipped}
              onChange={onChange}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onFlip}>{flipped ? "Turn back" : "Invert"}</button>
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

냅다 코드블럭이 있으니 당황했겠지?

내가 봐도 그렇다 ㅎ

 

일단 앞의 useState의 글과 이어진다. 

분과 시간 이 둘이 교차되면서 값이 나오길 원했고 위에 코드결과가 교차되면서 나오는 결과이다.

      const [flipped, setFlipped] = React.useState(false);
      const onChange = (event) => {
        setAmount(event.target.value);
      };
      const onFlip = () => {
        reset();
        setFlipped((current) => !current);
      };

먼저 위에부터 설명하자면 우리는 버튼을 하나 더 만들었는데 그 버튼은 flip버튼이다. 누르면 분과 시간 중에 원하는 곳에서 입력할 수 있도록 flip을 만들었는데, useState가 한개가 더 필요해서 첫줄 처럼 만들어주었다.

 

그 후에 setFlipped의 초깃값이 true면 false가 되도록 false면 true가 되도록 만들어 주었습니다.

(기본값이 true라서 false로 변경하는 것으로 함)

 

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

만약에 flipped라면 false인 값이니까 시간값이 나오니까 삼항연산자를 통해서 amount * 60을 해서 값을 표시하고 아니면 amount 기본값으로 나오도록 설정합니다.

 

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

시간은 반대로 flippend 라면 amount  기본값을 출력하고 아니라면 true값이기 때문에 나누기 60으로 해야한다. 

그리고 disabled = !filipped 를 설정해줘서 flipped 값이면 닫힌 회색창이 열리도록 설정해 두었다. 

마지막으로 위와 마찬가질로 onChange를 넣어주면서 입력 값을 받을 수 있도록 설정해 주고 

 

 <button onClick={onFlip}>{flipped ? "Turn back" : "Invert"}</button>

버튼에 onClick효과 onFlip을 두고 flipped인 경우와 아닐 경우에 이름이 바뀌도록 설정해 두었다.