인프런 커뮤니티 질문&답변
작성한 질문수
(실습) 섭씨온도와 화씨온도 표시하기 관련
해결된 질문
작성
·
655
·
수정됨
2
왜 화씨, 섭씨가 바뀌면 서로 서로 영향을 주면서 같이 바뀌는지 그 흐름이 정확히 이해가 안되네요.. console.log로 도배해서 파악한 바로는 아래와 같습니다.
[섭씨를 바꾼다는 가정]
TemperatureInput 컴포넌트의 value가 바뀜
TemperatureInput 컴포넌트의 props.onTemperatureChange(event.target.value); 호출
Calculator 컴포넌트의 handleCelsiusChange 호출
setTemperature(temprature)와 setScale('c') 호출하여 temprature, scale의 state가 바뀜
state가 바뀌었으니 Calculator 컴포넌트가 재생성(?)
Calculator 컴포넌트의 return에 TemperatureInput temperature props에 celsius, fahrenheit가 업데이트 된채로 TemperatureInput 컴포넌트 재생성(?)
TemperatureInput 컴포넌트의 input은 props.temperature를 value로 보여주고 있으니 각각 바뀜
위 가정의 흐름이 대충 맞는건지 궁금합니다! 뭔가 어거지로 끼워맞춘건지 제대로 파악하고 있는지 애매하네요...
답변 1
1
안녕하세요, 소플입니다.
쉽게 말하면, TemperatureInput 컴포넌트는 단순히 props로 받은 온도 값을 보여주고,
온도 값이 변경되었을 경우 props를 통해 받은 onTemperatureChange() 함수를 호출하는 역할만 합니다.
컴포넌트 자신이 직접 state를 들고 있는 것이 아닌 것이죠.
그리고 실제 온도 값과 단위는 상위 컴포넌트인 Calculator 컴포넌트가 useState() 훅을 사용하여 관리하고 있습니다.
이 값을 각각 섭씨, 화씨로 바꿔서 2개의 TemperatureInput 컴포넌트로 내려주는 것입니다.
리액트 컴포넌트는 state가 변경되면 질문에서 재생성이라고 표현하신 것처럼 재렌더링이 됩니다.
그래서 2개의 TemperatureInput 컴포넌트 중 어느 한 쪽에서 온도 값을 변경하게 되면,
상위 컴포넌트인 Calculator 컴포넌트가 들고있는 state가 변경되고,
그 결과로 2개의 TemperatureInput 컴포넌트가 모두 재렌더링 되어 화면에 새로운 값이 나타나게 되는 것입니다.
감사합니다.