[React] 섭씨 온도와 화씨 온도 표시하기 (Lifting State Up)

[React] 섭씨 온도와 화씨 온도 표시하기

• 재사용이 가능한 형태로 컴포넌트를 만들어 사용하는 것이 효율적
• BoilingVerdict 문장은 섭씨온도의 값을 props로 받아서 100도씨 이상이면 물이 끓는다는 문자열을 출력하고 외에는 물이 끓지 않는다는 문자열을 출력
• Calculator라는 컴포넌트는 State로 온도값을 하나 갖고 있고 사용자로부터 입력을 받기 위해 input 태그를 사용하여 ControlledComponent 형태로 구현
• 사용자가 온도를 변경할 때마다 handleChange 함수 호출
• SetTemperature함수를 통해 온도값을 갖고 있는 Temperature라는 이름의 State를 업데이트
• State에 있는 온도 값은 앞에서 만든 BoilingVerdict 컴포넌트에 celsius라는 이름의 prop으로 전달
• Calculator 컴포넌트에서 온도를 입력받는 부분을 추출하여 별도의 컴포넌트로 만든 것
• props의 단위를 나타내는 scale을 추가하여 온도의 단위를 섭씨 또는 화씨로 입력하도록 만듬
• 사용자가 입력하는 온도 값이 temperature input의 state에 저장되기 때문에 섭씨 온도와 화씨 온도 값을 따로 입력 받으면 2개의 값이 다를 수 있음
• 섭씨 온도와 화씨 온도의 값을 동기화하기 위해 먼저 각각에 대해 변환하는 함수를 작성해야 함
• tryConvert 함수는 온도 값과 변환하는 함수를 파라미터로 받아서 값을 변환시켜 리턴해 주는 함수
• 숫자가 아닌 값을 입력하면 empty string을 리턴하도록 예외 처리를 함
• 사용자가 온도값을 변경할 때마다 props에 있는 onTemperatureChange 함수를 통해 변경된 온도 값이 상위 컴포넌트로 전달
• State로 Temperature와 Scale을 선언하여 온도값과 단위를 각각 저장하도록 함
• 온도와 단위를 이용하여 변환함수를 통해 섭씨 온도와 화씨 온도를 구해서 사용

 

✨ Shared State

• 공유된 컴포넌트 
• 자식 커포넌트들이 가장 가까운 공통된 부모 컴포넌트의 스테이트를 공유해서 사용하는 것
• State에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우
• 하위 컴포넌트가 공통된 부모 컴포넌트의 State를 공유하여 사용하는 것
• 하위 컴포넌트의 State를 공통 상위 컴포넌트로 올림

 

공부한 자료

https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A% B8/dashboard

[지금 무료] 처음 만난 리액트(React) 강의 | Inje Lee (소플) - 인프런