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

• TemperatureInput 컴포넌트는 props로 scale과 temperature를 받아서 표시해주며, 온도 값이 변경되었을 때에는 props의 onTemperatureChange() 함수를 호출하여 상위 컴포넌트로 변경된 값을 전달하게 됩니다.

(실습) Calculator 컴포넌트 만들기

동일한 폴더에 Calculator.jsx 라는 이름의 파일을 새로 만들고 아래 코드처럼 Calculator라는 이름의 함수 컴포넌트를 만듭니다. 아래 코드에는 리액트 컴포넌트 이외에 온도 변환 함수도 함께 포함되어 있습니다.

정리

리액트의 여러 하위 컴포넌트에서 공통적으로 사용하는 state를 상위 컴포넌트의 state로 올려서 코드를 효율적으로 작성하는 방법에 대해 알아보았습니다. 리액트에서는 컴포넌트를 최대한 잘게 쪼개고 재사용이 가능한 형태로 개발하는 것이 중요합니다. 그렇기 때문에 이 장에서 배운 shared state에 대해서 잘 기억하기 바랍니다.