use State, onChange

React/개념

use State, onChange

하로이 2022. 10. 4. 16:27

<!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">
    const root = document.getElementById("root");
    function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        //setCounterr(counter +1);
        setCounter((current) => current + 1);
      };
      return (
        <div>
          <h3> Total clicks: {counter}</h3>
          <button onClick={onClick}> Click me </button>
        </div>
      );
    }

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

기존 값에서 새로운 값을 가져오는 것에는 두 가지 방법이 있다.

1. setCounterr(counter +1);

2.setCounter((current) => current + 1);

1번 같은 경우에는 초기값을 콕 집어서 +1 씩 증가시켜 주었지만 초기값에 오류가 있을 경우에는 좋지 않으므로 초기값을 가져오는 경우에는 2번 current함수를 불러와서 많이 쓴다.

<!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 [minutes, setMinutes] = React.useState(0);
      const onChange = (event) => {
        setMinutes(event.target.value);
      };
      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={Math.round(minutes / 60)}
              id="hours"
              placeholder="Hours"
              type="number"
              disabled
            />
          </div>
          <button onClick={reset}>Reset</button>
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

1. 이 코드를 작성하면서 배운점은 일단 React에서는 for, class는 javascript에서 이미 선점한 용어이기 때문에 사용하지 못하고 대신

for = htmlFor

class = className

이렇게 사용한다.

2. input 값 안에 value를 주고 onChange라는 이벤트를 실행시키면 현재 실행(작성) 중인 내용물이 보인다. 작성방법은 아래와 같다.

    function App() {
      const [minutes, setMinutes] = React.useState(0);
      const onChange = (event) => {
        setMinutes(event.target.value);
      };

3. 내가 작성하는 숫자에서 나누기 60을 하여 분으로 나타내고 Math.round(minutes / 60) 함수를 사용해서 반올림한다.

그리고 disavled를 사용하면 입력하지 못하게 위 사진처럼 회색으로 만들 수 있다.

 <label htmlFor="hours">Hours</label>
            <input
              value={Math.round(minutes / 60)}
              id="hours"
              placeholder="Hours"
              type="number"
              disabled