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

안녕하세요 12강 실습코드를 그대로 작성했는데 섭씨온도를 적었을때 화씨온도로 자동으로 변환되어 나타나지 않습니다. 화씨온도를 먼저 적었을때도 마찬가지고요. 코드 한번 봐주실 수 있나요? 감사합니다.

Calculator

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);
    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"
                temperatrue = {celsius}
                onTemperatureChange={handleCelsiusChange}/>
                
            <TemperatureInput scale="f"
                temperatrue = {fahrenheit}
                onTemperatureChange={handleFahrenheitChange}/>
            <BoilingVerdict celsius={parseFloat(celsius)} />
        </div>
    );
}

export default Calculator;

Temperatureinput

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

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

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

export default TemperatureInput;