[React] Lifting State Up

Lifting State Up

- 하위 컴포넌트의 State를 공통 상위 컴포넌트로 올림

 

 

Shared State

- 리액트로 개발시, 하나의 데이터를 여러대의 컴포넌트에서 표현해야 할 때가 있음.
- 이럴 경우 데이터를 각각 보관하는 게 아니라, 가장 가까운 공통된 부모 컴포넌트의 state를 공유해서 사용함
- State에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우

 

이렇듯 하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용하는 것

 

 

 

 

사용법 : 썹씨온도와 화씨온도 나타내기

하위 컴포넌트에서 State 공유하기

물의 끓음 여부를 알려주는 컴포넌트

부모 컴포넌트, State로 온도 값을 가지고 있고, 사용자가 온도값을 변경할 때마다 handleChange() 함수 호출됨

BoilingVerdict 컴포넌트에 celsius 라는 prop으로 전달됨

 

 

 

입력 컴포넌트 추출하기

온도를 입력받기 위한 TemperatureInput 컴포넌트

위의 Calculator 컴포넌트에서 온도를 입력 받는 부분을 추출하여 별도의 컴포넌트로 만들었다. 추가적으로 props로 단위를 나타내는 scale을 추가하여 온도의 단위를 썹시, 화씨로 나타내도록 함

 

 

 

변경한 Calculater 컴포넌트

하나는 섭씨, 하나는 화씨 온도를 입력받게 한다. 그러나 문제점은 사용자가 입력한 온도값이 TemperatureInput 컴포넌트의 State에 저장되기 때문에 썹씨온도와 화씨온도값을 따로 입력받으면 두개의 값이 다를 수 있다.

 

이를 해결하기 위해 값을 동기화 시켜줘야 한다.

 

 

온도 변환 함수 작성하기

섭씨를 화씨로, 화씨를 섭씨로 변환하는 함수

위의 변환함수를 호출하는 함수

온도값과 변환하는 함수를 파라미터로 넣어줌

 

 

 

Shared State 적용하기

먼저 TemperatureInput 컴포넌트에서 온도값을 가져오는 부분을 다음과 같이 수정한다. 이렇게 하면 온도값을 컴포넌트 State에서가 아닌 props에서 가져오게 된다.

 

 

handleChange() 함수 역시 다음과 같이 수정, 변경된 온도값이 상위 컴포넌트로 전달된다.

 

 

최종적으로 완성된 TemperatureInput 컴포넌트, State는 제거되었고, 오로지 상위 컴포넌트에서 전달받은 값만을 사용

 

 

 

Calculator 컴포넌트 변경하기

temperature와 scale에 온도값과 단위값을 각각 저장

TemperatureInput 컴포넌트 사용 부분에서는 각 단위로 변환된 온도값과 단위를 props로 넣어주었고, 값이 변경되었을 때 업데이트 하기 위한 함수를 onTemperatureChange에 넣어줌.  즉 섭씨온도가 변경되면 단위가 'c'로 변경되고 화씨온도가 변경되면 단위라 'f'로 변경된다.

 

 

 

최종적으로 완성된 구조

상위 컴포넌트 Calculator에서 온도값과 단위값을 각각 가지고 있으면, 두개의 하위 컴포넌트는 각각 섭씨와 화씨로 변환된 온도값과 단위, 그리고 온도를 업데이트하기 위한 onTemperatureChange() 함수를 props로 가지고 있다.