출력 메시지 관련
384
작성한 질문수 2
정말 기초적인 질문일수도 있는데, 섭씨 온도를 아무리 올려봐도 출력되는 메시지가 '물이 끓지 않습니다'로 나옵니다.
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 값은 정확하게 들어가는 것 같습니다.
답변 1
1
안녕하세요, 소플입니다.
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





