처음 만난 리액트 - 13. Lifting State Up

 Lifting state up : 여러 개의 컴포넌트들 사이에서 state를 공유하는 방법

-> 하나의 데이터를 여러개의 컴퓨터에서 사용(표현)해야 하는 경우,

각 컴포넌트의 스테이트에서 데이터를 각각 보관하는 것이 아니라

가장 가까운 공통된 부모 컴포넌트의 스테이트를 공유해서 사용한다.

 

Shared state : 어떤 컴포넌트의 스테이트에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말함.

예를 들어, 위와 같은 경우 자식 컴포넌트들이 각각 온도값을 갖고 있을 필요 없이 그냥 부모 컴포넌트의 state에 있는 섭씨 온도값을 변환해서 표시해주면 된다.

 

이 경우를 이용해 사용자로부터 온도를 입력받아서 각각 섭씨 온도와 화씨 온도를 표현해주고 해당 온도에서 물이 끓는지 안 끓는지를 출력해주는 컴포넌트를 만들어 보면서 스테이트를 공유하는 방법에 대해 알아보자.

 

섭씨온도 값을 props로 받아서 물이 끓는지 안 끓는지를 문자열로 출력해주는 컴포넌트

위 코드는 섭씨온도 값을 props로 받아서 100°C 이상이면 물이 끓는다는 문자열을 출력하고 그 외에는 물이 끓지 않는다는 문자열을 출력함.

 

이 컴포넌트를 실제로 사용하는 부모 컴포넌트를 만들자.

부모 컴포넌트

- 이 컴포넌트는 State로 온도값을 하나 갖고 있으며 사용자로부터 입력을 받기 위해서 input 태그를 사용하여 앞에서 배운 ControlledComponent 형태로 구현되어 있음.

- 사용자가 온도값을 변경할 때마다 handleChange함수가 호출되고 setTemperature함수를 통해 온도값을 갖고 있는 temperature라는 이름의 state를 업데이트 함.

- state에 있는 온도값은 앞에서 만든 BoilingVerdict 컴포넌트에 Celsius라는 이름의 prop으로 전달됨.

 

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

-  기존의 칼큘레이터 컴포넌트 안에 온도를 입력하는 부분을 별도의 컴포넌트로 추출해 섭씨 온도와 화씨 온도를 각각 따로 입력받을 수 있도록 하여 재사용이 가능한 형태로 만든 것.

 

추가적으로 props의 단위를 나타내는 scale을 추가하여 온도의 단위를 섭씨 또는 화씨로 입력 가능하도록 만들었음

이렇게 추출한 컴포넌트를 사용하도록 Calculator 컴포넌트를 변경하면 

 

이렇게 된다. 총 2개의 입력을 받을 수 있도록 되어 있으며 하나는 섭씨 온도를 입력받고 다른 하나는 화씨 온도를 입력받는 형태이다.

 

다만, 사용자가 입력하는 온도 값이 temperature input의 state에 저장되기 때문에 섭씨 온도와 화씨 온도 값을 따로 입력받으면 2개의 값이 다를 수 있고, 이를 해결하기 위해서 값을 동기화 시켜줘야 한다.

온도 변환 함수 작성하기

 

위 함수는 섭씨온도를 화씨온도로 변환하는 함수와 화씨온도를 섭씨온도로 변환하는 함수이다.

이렇게 만든 함수를 호출하는 함수는 아래와 같다.

- 온도 값과 변환하는 함수를 파라미터로 받아서 값을 변환시켜 리턴해 주는 함수

위 함수를 사용하려면 온도값과 변환하는 함수를 파라미터로 넣어주면 된다.

 

하위 컴포넌트의 스테이트를 공통된 부모 컴포넌트로 끌어올려서 shared state 적용하기

하위 컴포넌트의 state를 상위 컴포넌트로 올리는 것 =  lifting state up 이라고 함

 

- TemperatureInput 컴포넌트에서 온도값 가져오는 부분 수정하기

이렇게 하면 온도값을 컴포넌트에스테이트에서 가져오는 것이 아닌 프랍스를 통해서 가져오게 된다.

또한 입력값이 변경되었을 때 상위 컴포넌트로 변경된 값을 전달해 주어야 하기 때문에 handleChange 함수를 다음과 같이 변경한다.

 

최종적으로 완성된 TemperatureInput 컴포넌트의 모습

 

변경된 Calculator 컴포넌트의 모습

 

- state로 Temperature와 Scale을 선언하여 온도값과 단위를 각각 저장