인프런 커뮤니티 질문&답변

개발자 도구로 보면 섭씨에 값 입력 시 화씨 input에도 값이 담기고 변하는데 텍스트는 보이지 않습니다...

찾아보니 <input value="{props.temperature}"> 대신 <input defaultValue="{props.temperature}"> 를 쓰면 된대서 defaultValue를 쓰면 텍스트가 잘 나옵니다...

아래 사진은 <input defaultValue={props.temperature}>으로 수정했을 때 입니다.

왜 <input value=""> 대신 <input defaultValue="">를 사용해야 정상적으로 나오는지 궁금합니다.

TemperatureInput.jsx

const scaleNames = {
  c: "섭씨",
  f: "화씨",
};

function TemperatureInput(props) {
  const handleChange = (event) => {
    props.onTemperatureChange(event.target.value);
  };

  return (
    <fieldset>
      <legend>온도를 입력해주세요(단위: {scaleNames[props.scale]})</legend>
      <input vaule={props.temperature} onChange={handleChange} />
    </fieldset>
  );
}

export default TemperatureInput;

Calculator.jsx

import React, { useState } from "react";
import TemperatureInput from "./TemperatureInput";

function BoilingVerdict(props) {
  //물 끓음 감지
  if (props.celsius >= 100) {
    return <p>물이 끓습니다.</p>;
  }
  return <p>물이 끓지 않습니다.</p>;
}

function toCelsius(fahrenheit) {
  //화씨 계산 함수
  return ((fahrenheit - 32) * 5) / 9;
}

function toFahrenheit(celsius) {
  //섭씨 계산 함수
  return (celsius * 9) / 5 + 32;
}

function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return "";
  }
  const output = convert(input); //섭씨 or 화씨로 변환
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

function Calculator(props) {
  const [temperature, setTemperature] = useState("");
  const [scale, setScale] = useState("c");

  const handleCelsiusChange = (temperature) => {
    setTemperature(temperature);
    setScale("c");
  };

  const handleFahrenheitChange = (temperature) => {
    setTemperature(temperature);
    setScale("f");
  };

  const celsius =
    scale === "f" ? tryConvert(temperature, toCelsius) : temperature;
  const fahrenheit =
    scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature;

  return (
    <div>
      <TemperatureInput
        scale="c"
        temperature={celsius}
        onTemperatureChange={handleCelsiusChange}
      />

      <TemperatureInput
        scale="f"
        temperature={fahrenheit}
        onTemperatureChange={handleFahrenheitChange}
      />

      <BoilingVerdict celsius={parseFloat(celsius)} />
    </div>
  );
}

export default Calculator;