(실습) 섭씨온도와 화씨온도 표시하기 관련

Question

왜 화씨, 섭씨가 바뀌면 서로 서로 영향을 주면서 같이 바뀌는지 그 흐름이 정확히 이해가 안되네요.. 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로 보여주고 있으니 각각 바뀜 위 가정의 흐름이 대충 맞는건지 궁금합니다! 뭔가 어거지로 끼워맞춘건지 제대로 파악하고 있는지 애매하네요...

Inje Lee (소플) · Answer

안녕하세요, 소플입니다. 쉽게 말하면, TemperatureInput 컴포넌트는 단순히 props 로 받은 온도 값을 보여주고, 온도 값이 변경되었을 경우 props 를 통해 받은 onTemperatureChange() 함수를 호출하는 역할만 합니다. 컴포넌트 자신이 직접 state 를 들고 있는 것이 아닌 것이죠.   그리고 실제 온도 값과 단위는 상위 컴포넌트인 Calculator 컴포넌트가 useState() 훅을 사용하여 관리하고 있습니다. 이 값을 각각 섭씨, 화씨로 바꿔서 2개의 TemperatureInput 컴포넌트로 내려주는 것입니다. 리액트 컴포넌트는 state 가 변경되면 질문에서 재생성 이라고 표현하신 것처럼 재렌더링 이 됩니다. 그래서 2개의 TemperatureInput 컴포넌트 중 어느 한 쪽에서 온도 값을 변경 하게 되면, 상위 컴포넌트인 Calculator 컴포넌트가 들고있는 state 가 변경 되고, 그 결과로 2개의 TemperatureInput 컴포넌트가 모두 재렌더링 되어 화면에 새로운 값이 나타나게 되는 것입니다.   감사합니다.