inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

처음 만난 리액트(React)

출력 메시지 관련

384

김종운

작성한 질문수 2

0

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

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 값은 정확하게 들어가는 것 같습니다.

javascript react HTML/CSS

답변 1

1

Inje Lee (소플)

안녕하세요, 소플입니다.

BoilingVerdict에 오타가 있네요~

props.celcius가 아니라 props.celsius가 되어야 할 것 같습니다.

보통 이런 오류를 만나게 되면 해당 컴포넌트 내에서 console.log(props);로 로그를 찍어보시면 원인을 빨리 찾으실 수 있습니다!

강의가 삭제되었다고 합니다

0

112

1

이거 왜 존재하지 않는다고 뜨는건가요

0

141

1

존재하지 않는 수업이라고 떠요

0

186

1

안드로이드 에뮬레이터 오류

0

102

1

교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.

0

133

1

prevIsConfiromed 질문

1

144

2

chapter14 잘이해가 되지않습니다..

1

137

2

2025년 3월 리액트버전

1

206

2

npm 설치 오류

1

181

1

chapter_07 콘솔로그 질문드려요~!

1

130

2

안녕하세요 미니블로그 실습 질문드립니다.

1

181

3

에러가 떠요

1

220

3

Chapter6 질문 드립니다

1

211

2

실습 코드 있을까요?

1

209

2

상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.

1

235

2

npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다

0

311

3

이름과 코멘트 줄바꿈이 안 됩니다.

0

144

1

버튼이 안 뜹니다

0

305

2

npx create-react-app my-app

1

474

2

jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.

1

378

3

Chapter_05 터미널, 리액트 에러

0

197

2

npx create-react-app my-app 명령어 반응없음

1

435

3

import 코드 에러

1

216

1

백틱

1

123

1