React practice

State Practice

Input 요소로 환전 기능을 만들어보자 || State Function, Inputs and State

📍 아래 예제를 통해 배울 수 있는 것!
state를 바탕으로 UI를 변경하는게 유용한지를 알 수 있다.
state의 사용법을 익힐 수 있다.

state를 세팅하는 2가지 방법 = State Function

1) 직접 할당 ex. setCounter(counter +1)
2) 함수 할당 ex. setCounter((current) ⇒ current + 1)

// 1과 2의 차이
// 1번으로 실행 시 화면에는 +1씩 증가한다.
let [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter +1)
        setCounter(counter +1)
        setCounter(counter +1)
        setCounter(counter +1)
      }
// 2번으로 실행 시 화면에는  +4씩 증가한다.
const onClick = () => {
        setCounter((current) => current +1)
        setCounter((current) => current +1)
        setCounter((current) => current +1)
        setCounter((current) => current +1)
      }

<<script type="text/babel">
    const root = document.getElementById("root");
    function App() {
      let [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter((current) => current +1)
      }
      return (
        <div>
          <h3> Total clicks : {counter}</h3>
          <button onClick = {onClick}> Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>

---

Inputs and State ✨

❕여기서 잠깐, 
  개발자 모드로 작성시 JS 문법인 `for`은 사용할 수 없다. 마찬가지로 `class`도 사용할 수 없다! 
  `for` ⇒ `htmlFor`   \  `class` ⇒ `className`

function App() {
      return (
        <div>
          <h1 className="hi"> Super Convert </h1>
          <label htmlFor="minutes">Minutes </label>
          <input id= "minutes" placholder = "Minutes" type = "number" />
          <label htmlFor="hours">Hours </label>
          <input id= "hours" placholder = "Hours" type = "number" />
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>

✅ setState를 적용해 보자. (값 넣어보기)

<script type="text/babel">
    const root = document.getElementById("root");

    function App() {
   ✅ const [minutes, setMinutes] = React.useState();
      const onChange = (event) => {
			//console.log(event.target.value)를 디버깅해보면 input의 값이 나온다.
      setMinutes(event.target.value) //Input 입력값을 구한다.
      }
      return (
        <div>
          <h1 className="hi"> Super Convert </h1>
          <label htmlFor="minutes">Minutes </label>
          <input
            value={minutes}       //외부에서도 input값을 수정하기 위해서 작성. ex)reset
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={onChange}   //input요소에 변화가 감지되면 함수 실행
          />

          <label htmlFor="hours">Hours </label>
          <input
            value={Math.round(minutes / 60)} //value값 이용 계산
            id="hours"
            placeholder="Hours"
            type="number"
						//Hours 인풋 요소에는 이벤트 속성이 onChange={onChange}가 없기 때문에 입력창에서 편집이 되지 않는다.
						disabled //이 요소를 추가하여 비활성화 상태임을 표시하자
          />
        </div>
      )

    }
    ReactDOM.render(<App />, root);
  </script>

'
'
'
✅ 단위 변환 반전 함수 (filp function)을 배워보자.
Hours의 속성인 disabled가 기본이 되도록 하고,
filp 함수를 사용해서 Minutes과 Hours가 왔다갔다~(filp)하고

두 인풋의 상태값이 반대여야 함!

<script type="text/babel">
    const root = document.getElementById("root")
    function App() {
      const [minutes, setMinutes] = React.useState(0)
      const [flipped, setFlipped] = React.useState(false) //기본값 false인 useState 생성
      const onChange = (event) => {
        setMinutes(event.target.value)
      };
      const reset = () => setMinutes(0)
      const onFlip = () => setFlipped((current) => !current) //버튼 이벤트 생성 //set현재 상태값의 반대가 되어라
      return (
        <div>
          <div>
            <h1 className="hi"> Super Convert </h1>
            <label htmlFor="minutes">Minutes </label>
            <input
              value={minutes}
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={onChange}
              disabled={flipped === true} // 상태값으로 불리언 값 출력 *A
							disabled= {flipped} 	        // 간단하게 작성하려면 이렇게도 가능
            />
          </div>
          <div>
            <label htmlFor="hours">Hours </label>
            <input
              value={Math.round(minutes / 60)}
              id="hours"
              placeholder="Hours"
              type="number"                 //set함수의 기본값이 false이므로 true값이 나오게끔 수식 작성.
              disabled={flipped === false} // 상태값으로 불리언 값 출력 *B A와 B는 정반대의 결과값이 도출된다.
              disabled={!flipped}           // 간단하게 작성하려면 이렇게도 가능
            />
          </div>
          <button id="reset" onClick={reset}>Reset</button>
          <button id="filp" onClick={onFlip}>Flip</button> //버튼 이벤트 할당
        </div>
      )
    }
    ReactDOM.render(<App />, root)
  </script>

✅ 삼항연산자를 사용해보자.
Hours의 입력창이 활성화 됐을때!! 입력 가능하게! 실시간 상태값 업데이트가 되도록 수식을 짜보자!

Minutes의 사용처가 Hours에도 확장되었으므로 역할에 맞게 이름을 바꿔준다! ⇒ amount
flipt을 할때에 인풋의 값이 임의로 변경되므로 flip 시에 값이 0이 되도록 reset( )함수를 적용한다.

<script type="text/babel">
    const root = document.getElementById("root");
    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>
          <div>
            <h1 className="hi"> Super Convert </h1>
            <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"
              onChange={onChange}
              disabled ={!flipped} 
            />
          </div>
          <button id="reset" onClick={reset}>
            Reset
          </button>
          <button id="filp" onClick={onFlip}>
            Flip
          </button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

여기서 잠깐 🙂 flip보다 Invert라는 단어가 더 명확한것 같은걸~ 단어 바꿔보쟈~
그리고 [flip]버튼도 삼항연산자로 상태값에 따라 바뀌게 해보자!