framework/react

3. Inputs and State

wooweee 2023. 6. 8. 03:28
728x90

1. converter (min -> hour)

 

label의 for와 같은 경우에는 JS에서 for 문법이 존재하기 때문에 JSX에서는 html for을 사용 하면 안된다. 헷갈리기때문이다.

 

쓰면 안되는 html attribute

1. class

2. for

변경

1. className

2. htmlFor

 

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- body 끝 -->

  <!-- 현재는 production mode여서 괜찮지만, development.min.js 이면 경고문구 발생-->
  <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">
    const root = document.getElementById("root");
    function App() {
      return (
        <div>
          <!-- <h1 class="hi"> Super Converter </h1> 사용시 error--> 
          <h1 className="hi"> Super Converter </h1>
          
          <!-- <label for="minutes">Minutes</label> -->
          <label htmlFor="minutes">Minutes</label>
          <input id="minutes" placeholder="Minutes" type="number" />

          <label htmlFor="hours">Hours</label>
          <input id="hours " placeholder="Hours" type="number" />
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>

 

2. unController 된 number

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- 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 [minutes, setMinutes] = React.useState();
      const onChange = () => {
        console.log("hi");
      };

      // 변경될 동작 code
      return (
        <div>
          <h1 className="hi"> Super Converter </h1>
          <label htmlFor="minutes">Minutes</label>
          <input
            value={minutes} // 변하는 state를 넣기
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={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>

target, nativeEvent,SyntheticEvent

 

  • event를 바로 받아올 수 있다.
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- 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 [minutes, setMinutes] = React.useState();
      // getDocument할 필요없이 event로부터 원하는 값을 받아온다.
      const onChange = (event) => {
        // console.log(event.target.value);
        setMinutes(event.target.value);
      };

      // 변경될 동작 code
      return (
        <div>
          <h1 className="hi"> Super Converter </h1>
          <label htmlFor="minutes">Minutes</label>
          <input
            value={minutes} // 변하는 state를 넣기
            id="minutes"
            placeholder="Minutes"
            type="number"
            onChange={onChange} // 변화를 감지하는 onChange
          />

          <h4>You want convert minute {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>

 

 

4. state가 한쪽으로만 event를 작동할 수 있도록 하는 방법

 

  • state에 2가지 (state date, state f)가 존재하지 않으면 일반 html로 작동
  • 만약 2가지 중 1개(state data)만 default로 존재하고 function이 존재하지 않으면 event 작동하지 않는다.
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- 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 [minutes, setMinutes] = React.useState(0); // default로 0을 줌
      // getDocument할 필요없이 event로부터 원하는 값을 받아온다.
      const onChange = (event) => {
        setMinutes(event.target.value);
      };

      // 변경될 동작 code
      return (
        <div>
          <h1 className="hi"> Super Converter </h1>
          <label htmlFor="minutes">Minutes</label>
          <input
            value={minutes} // 변하는 state를 넣기
            id="minutes"
            placeholder="Minutes"
            type="number"
            // onChange={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>

 

  • hour에 적용하기
  • {minute}을 사용하기때문에 minute에 관한 function은 존재해서 minute input 에는 값을 변경 가능하지만
  • hour같은 경우에는 해당 function이 존재하지 않기 때문에 input 값 변경이 불가하다.

 

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- 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 [minutes, setMinutes] = React.useState();
      // getDocument할 필요없이 event로부터 원하는 값을 받아온다.
      const onChange = (event) => {
        // console.log(event.target.value);
        setMinutes(event.target.value);
      };

      // 변경될 동작 code
      return (
        <div>
          <h1 className="hi"> Super Converter </h1>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={minutes} // 변하는 state를 넣기
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={onChange} // 변화를 감지하는 onChange
            />
          </div>
          <div>
            <label htmlFor="hours">Hours</label>
            <input
              value={minutes}
              id="hours "
              placeholder="Hours"
              type="number"
            />
          </div>
        </div> // return div 끝
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

 

  • 철자 오류를 정말 조심해야한다.
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- 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 [minutes, setMinutes] = React.useState();
      // getDocument할 필요없이 event로부터 원하는 값을 받아온다.
      const onChange = (event) => {
        // console.log(event.target.value);
        setMinutes(event.target.value);
      };
      const reset = () => setMinutes(0);
      // 변경될 동작 code
      return (
        <div>
          <h1 className="hi"> Super Converter </h1>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={minutes} // 변하는 state를 넣기
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={onChange} // 변화를 감지하는 onChange
            />
          </div>
          <div>
            <label htmlFor="hours">Hours</label>
            <input
              value={Math.round(minutes / 60)} // 동적으로 변경되는 부분 전체를 {}로 적용
              id="hours "
              placeholder="Hours"
              type="number"
            />
          </div>
          <button onClick={reset}>Reset</button>
        </div> // return div 끝
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

 

 

5. flip - 

  • 오타는 useState를 userState라고 했는지 잘 확인하기
<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- 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 [minutes, setMinutes] = React.useState();
      const [flipped, setFlipped] = React.useState(false);
      // getDocument할 필요없이 event로부터 원하는 값을 받아온다.
      const onChange = (event) => {
        // console.log(event.target.value);
        setMinutes(event.target.value);
      };
      const reset = () => setMinutes(0);
      const onFlip = () => setFlipped((current) => !current);

      // 변경될 동작 code
      return (
        <div>
          <h1 className="hi"> Super Converter </h1>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={minutes} // 변하는 state를 넣기
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={onChange} // 변화를 감지하는 onChange
              disabled={flipped === true}
            />
          </div>
          <div>
            <label htmlFor="hours">Hours</label>
            <input
              value={Math.round(minutes / 60)} // 동적으로 변경되는 부분 전체를 {}로 적용
              id="hours "
              placeholder="Hours"
              type="number"
              // 현재 hours에 Onchange라는 event가 없기 때문에 hours의 변경이 불가하다.
              disabled={flipped === false}
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onFlip}>Flip</button>
        </div> // return div 끝
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

 

 

시간 convert 넣기

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <!-- 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();
      const [flipped, setFlipped] = React.useState(false);
      // getDocument할 필요없이 event로부터 원하는 값을 받아온다.
      const onChange = (event) => {
        // console.log(event.target.value);
        setAmount(event.target.value);
      };
      const reset = () => setAmount(0);
      const onFlip = () => {
        reset();
        setFlipped((current) => !current);
      };

      // 변경될 동작 code
      return (
        <div>
          <h1 className="hi"> Super Converter </h1>
          <div>
            <label htmlFor="minutes">Minutes</label>
            <input
              value={flipped ? amount * 60 : amount} // 변하는 state를 넣기
              id="minutes"
              placeholder="Minutes"
              type="number"
              onChange={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"
              // 현재 hours에 Onchange라는 event가 없기 때문에 hours의 변경이 불가하다.
              disabled={!flipped}
              onChange={onChange} // 변화를 감지하는 onChange
            />
          </div>
          <button onClick={reset}>Reset</button>
          <button onClick={onFlip}>Flip</button>
        </div> // return div 끝
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>
저작자표시 비영리 변경금지

'framework/react'의 다른글

  • 현재글3. Inputs and State

관련글

티스토리툴바