Shared State

Lifting State Up

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

 

Shared State 공유된 state

: state에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우

자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 스테이트를 공유해서 사용하는 것

 

 

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

 

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

function BoilingVerdict(props) {
	if (props.celsius >= 100) {
    return <p>물이 끓습니다.</p>;
    }
    return <p>물이 끓지 않습니다. </p>;
}

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

 

 

2) 이 컴포넌트를 실제로 사용하는 부모 컴포넌트

function Calculator(props) {
	const [temperature, setTemperature] = useState('');
	const handleChange = (event) => {
		setTemperature(event.target.value);
		}
		return (
			<fieldset>
				<legend>섭씨 온도를 입력하세요: </legend>
				<input
					value={temperature}
					onChange={handleChange} />
				<BoilingVerdict
					celsius = {parseFloat(temperature)} />
			</fieldset>
			)
}

 

-> Calculator라는 컴포넌트는 state로 온도값을 하나 갖고 있으며 controlled Component 형태로 구현됨

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

 

3) 입력 컴포넌트 추출하기

: Calculator 컴포넌트 안에 온도를 입력하는 부분을 별도의 컴포넌트로 추출하기 -> 섭씨 온도와 화씨 온도를 각각 따로 입력받을 수 있도록 하여 재사용이 가능한 컴포넌트를 만들어 사용

 

[온도를 입력받기 위한 Temperaturelnput 컴포넌트]

const scaleNames = {
		c : '섭씨',
		f : '화씨'
	};
 	function TemperatureInput(props) {
		const [temperature, setTemperature] = useState('');
		const handleChange = (event) => {
			setTemperature(event.target.value);
		}
		return (
			<fieldset>
				<legend>
				온도를 입력해 주세요 (단위:{scaleNames[props.scale]}):
				</legend>
				<input value ={temperature} onChange={handleChange} />
			</fieldset>
			)
}

 

[추출한 컴포넌트를 사용하도록 Calculator 컴포넌트를 변경했을 때]

function Calculator(props) {
	return (
		<div>
			<TemperatureInput scale="c" />
			<TemperatureInput scale="f" />
		</div>
		);
}

 

4) 온도 변환 함수 작성하기

: 섭씨온도와 화씨온도 값을 동기화시키기 위해서 각각에 대해 변환하는 함수를 작성해야 함

function toCelsius(fahrenheit) {
	return (fahrenheit - 32) * 5 / 9;
	}
function toFahrenheit(celsius) {
	return (celsius * 9 / 5) + 32;
}

 

5) 이 함수를 호출하는 함수 작성

function tryConvert(temperature, convert) {
		const input = parseFloat(temperature);
	
   	 	if(Number.isNaN(input)) {
		return ' ';
		}
		const output = convert(input);
		cosnt rounded = Math.round(output * 1000) / 1000;

	return rounded.toString();
}

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

 

6) Shared State 적용하기

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

*lifting state up : 하위 컴포넌트의 state를 공통 상위 컴포넌트로 올림

//변경 전 : <input value ={temperature} onChange={handleChange} />

<input value={props.temperature} onChange={handleChange} />

• handleChange함수 변경하기

// 변경 전 : setTemperature(event.target.value);

props.onTemperatureChange(event.target.value);

 

7) Calculator 컴포넌트 변경하기

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

TemperatureInputComponent를 사용하는 부분에서는 각 단위로 변환된 온도값과 단위를 props로 넣어주었고

값이 변경되었을 때 업데이트하기 위한 함수를 onTemperatureChange에 넣어줌

-> 섭씨온도가 변경되면 단위가 C로 변경되고 화씨온도가 변경되면 단위가 F로 변경됨