[React] input 값 사용하기

✏️ React에는 controlled component와 uncontrolled component가 있습니다.

 

쉽게 설명하면

 

uncontrolled component(비제어 컴포넌트)는 ref를 통해 값을 가져올 수 있고 특정 행동이 있어야 값이 기록됩니다.

즉, 비동기적으로 값의 변화를 확인할 수 없다는 뜻

 

controlled component(제어 컴포넌트)는 state로 값을 기록하여 setState()를 통해 값을 업데이트합니다.

제어 컴포넌트는 비동기적으로 값이 변하는 것을 확인할 수 있습니다.

 

---

function App() {
  const [minutes, setMinutes] = React.useState();
  const onChange = (event) => {
    console.log(event);
  };
  return (
    <div>
      <h1>Super Converter</h1>
      <label htmlFor="minutes">Minutes</label>
      <input
        value={minutes}
        id="minutes"
        placeholder="Minutes"
        type="number"
        onChange={onChange}
      />
      <label htmlFor="hours">Hours</label>
      <input id="hours" type="number" placeholder="Hours" />
    </div>
  );
}

위와 같은 코드에서 minutes라는 id를 가진 input 태그에 값을 입력하면

값의 변경을 감지하여 onChange라는 함수가 실행됩니다.

 

 

onChange 함수에서는 event를 출력하는데 이 event는 React에서 event를 최적화시킨 가짜 event를 보여줍니다.

원래의 이벤트는 event 안에 nativeEvent로 존재합니다.

 

 

우리가 원하는 input 태그의 값은 target 안에 있는 value에 존재합니다.

 

 

 

function App() {
  const [minutes, setMinutes] = React.useState();
  const onChange = (event) => {
    console.log(event.target.value);
  };
  return (
    <div>
      <h1>Super Converter</h1>
      <label htmlFor="minutes">Minutes</label>
      <input
        value={minutes}
        id="minutes"
        placeholder="Minutes"
        type="number"
        onChange={onChange}
      />
      <label htmlFor="hours">Hours</label>
      <input id="hours" type="number" placeholder="Hours" />
    </div>
  );
}

위와 같은 코드를 통해 input 태그에 입력한 값을 얻을 수 있습니다.

 

---

 

input 태그에 입력된 값을 제어 컴포넌트로 사용하여 state를 통해 값을 실시간으로 감지하고 싶다면

minutes의 값을 변경하는 setMinutes 함수를 호출하여 값을 변경합니다.

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={minutes / 60}
          id="hours"
          placeholder="Hours"
          type="number"
        />
      </div>

      <button onClick={reset}>Reset</button>
    </div>
  );
}

input 태그에 값을 입력하면 onChange 함수가 실행되고 onChange 함수에서 setMinutes 함수를 통해

minutes라는 state를 변경하여 input의 value에 state인 minutes로 연결합니다.

 

이 때, value를 state로 연결하는 이유는 어디서든 input의 value를 수정할 수 있도록 하기 위함입니다.

 

마지막으로 reset 버튼을 클릭하면 reset 함수가 실행되어 minutes의 값을 0으로 초기화합니다.

 

---

 

✅ 최종 분(Minutes) & 시(Hours) 변환기

const root = document.getElementById("root");
function App() {
  const [amount, setAmount] = React.useState(0);
  const [inverted, setInverted] = React.useState(false);
  const onChange = (event) => {
    setAmount(event.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 : 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>
  );
}
ReactDOM.render(<App />, root);

시간 값을 amout라는 state로 생성하고

분에서 시로 변경하거나 시에서 분으로 변경하는 것을 제어하기 위해 inverted라는 state도 함께 생성합니다.

 

 

Invert 버튼을 클릭하면 inverted값이 default인 false에서 true로 바뀝니다. (현재의 값과 반대의 값으로 변경)

그 후 disabled가 true였던 input 값이 false로 바뀌고 활성화됩니다.

즉, 처음엔 minutes input이 활성화되어 있었지만 Invert 버튼을 통해 hours input이 활성화됩니다.

 

 

 

inverted 값에 따라 input의 value도 바뀌어야 합니다.

 

inverted가 false라면

minutes의 value에 amount가 들어가고 hours의 value에는 amount / 60의 값이 들어갑니다.

 

inverted가 true라면

hours의 value에 amount가 들어가고 minutes의 value에는 amount * 60의 값이 들어갑니다.