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

정말 기초적인 질문일수도 있는데, 섭씨 온도를 아무리 올려봐도 출력되는 메시지가 '물이 끓지 않습니다'로 나옵니다.

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 value = {props.temperature} onChange = {handleChange} />
        </fieldset>
    )
}

export default TemperatureInput;

Calculator.jsx

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

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

function toCelsius(fahrenheit) {
    return ((fahrenheit - 32) * 5) / 9;
}

function toFahrenheit(celcius) {
    return (celcius * 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"
                temperature = {celsius}
                onTemperatureChange = {handleCelsiusChange}
            />
            <TemperatureInput
                scale = "f"
                temperature = {fahrenheit}
                onTemperatureChange = {handleFahrenheitChange}
            />
            <BoilingVerdict celsius = {parseFloat(celsius)} />
        </div>
    )
}

export default Calculator;

어디서 잘못된걸까요? 개발자 도구에서 component를 확인해봐도 scale, temperature 값은 정확하게 들어가는 것 같습니다.