💡 Shared State
State에 있는 데이터를 여러 개의 하위 컴포넌트에서 공통적으로 사용하는 경우
하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용하는 것
💡 하위컴포넌트에서 State 공유하기
물의 끓음 여부를 알려주는 컴포넌트
function BoilingVerdict(props) {
// 100씨 이상이면~
if (props.celsius >= 100) {
return <p>물이 끓습니다.</p>;
}
return <p>물이 끓지 않습니다.</p>;
}Calculator Component
// state로 온도값을 갖고 있음
// 사용자로부터 입력을 받기 위해 input태그 사용, Controlled Component 형태로 구현
function Calculator(props) {
const [temperature, setTemperature] = useState('');
// 사용자가 온도값을 변경할 때 마다 handleChange 함수 호출
// setTemperature 함수를 통해 온도 값을 갖고 있는 temperature라는 이름에 State Update
const handleChange = (event) => {
setTemperature(event.target.value);
}
return (
<fieldset>
<legend>섭씨 온도를 입력하세요:</legend>
<input
value={temperature}
onChange={handleChange} />
<BoilingVerdict
// State에 있는 온도 값을 celsius prop으로 전달
celsius={parseFloat(temperature)} />
</fieldset>
)
}입력 컴포넌트 추출하기
각각 따로 입력을 받아서 재사용이 가능한 형태로 컴포넌트를 만들어서 사용 (효율적)
온도를 입력받기 위한 TemperatureInput Component
// Calculator Component에서 온도를 입력받는 부분을 추출하여 별도의 Component로 만든 것
// 온도 단위 설정
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>
)
}// 총 두개의 입력
function Calculator(props) {
return (
<div>
<TemperatureInput scale="c" />
<TemperatureInput scale="f" />
</div>
);
}
// 사용자가 입력하는 온도의 값이 TemperatureInput에 State에 저장
// 섭씨 온도와 화씨 온도 값을 따로 입력받으면 두개의 값이 다를 수 있음
// 이를 해결하기 위해 값을 동기화온도 변환 함수 작성하기
// 화씨에서 섭씨
function toCelsius(fahrenheit) {
return (fahrenheit - 32) * 5 / 9;
}
// 섭씨에서 화씨
function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}// 온도값과 변환하는 함수를 파라미터로 받아서 값을 변환시켜 return하는 함수
// 만약 숫자가 아닌 값을 입력 시, empty string 리턴 (예외처리)
function tryConvert(temperature, convert)
const input = parseFloat(temperature);
if (Number.isNaN(input)) {
return '';
}
const output = convert(input);
const rounded = Math.round(output * 1000) / 1000;
return rounded.toString();
}tryConvert 실제로 사용 방법
// 온도 값과 변환하는 함수를 파라미터에 넣어주면 됨
tryConvert('abc', toCelsius); // empty string 리턴
tryConvert('10.22', toFahrenheit); // '50.396' 리턴Shared State 적용하기
하위 컴포넌트의 state를 공통 상위 컴포넌트로 올림
// temperatureInput Component에서 온도 값을 가져오는 부분 수정
return (
...
// 변경 전 : <input value={temperature} onChange={handleChange} />
<input value={props.temperature} onChange={handleChange} />
...
)
// 온도 값을 Component State에서 가져오는 것이 아닌 Props를 통해서 가져오게 됨
// 또한 Component State를 사용하지 않기 때문에 입력 값이 변경되었을 때 상위 컴포넌트로 변경된 값을 전달해야 함const handleChange = (event) => {
// 변경 전: setTemperature(event.target.value);
props.onTemperatureChange(event.target.value);
}
/* 사용자가 온도 값을 변경할 때마다 Props에 onTemperatureChage 함수를 통해
변경된 온도 값이 상위 컴포넌트에 전달 */최종 TemperatureInput Component
function TemperatureInput(props) {
const handleChange = (event) => {
props.onTemperatureChange(event.target.value);
}
return (
<fieldset>
<legend>
온도를 입력해 주세요(단위:{scaleNames[props.scale]}):
</legend>
<input value={props.temperature} onChange={handleChange} />
</fieldset>
)
}
// state 제거, 오로지 상위 컴포넌트에서 전달받은 값만 사용Calculator 컴포넌트 변경하기
// 변경된 Calculator Component
// temperature와 scale를 설정하여 온도 값과 단위 각각 저장
// 이 온도와 단위를 이용하여 변환 함수를 통해 섭씨온도와 화씨온도를 구해서 사용
function Calculator(props) {
const [temperature, setTemperature] = useState('');
const [scale, setScale] = useState('c');
const handleCelsiusChange = (temperature) => {
setTemperature(temperature);
setScale('c');
}
const handleFahrenheitChange = (temperature) => {
setTemperature(temperature);
setScale('f');
}
const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
return (
<div>
// 각 단위로 변환된 온도 값과 단위를 Props 값에 넣어줌
// 값이 변경될 때 Update하기 위한 함수는 onTemperatureChange에 넣어줌
// 섭씨온도가 변경되면 단위가 C
// 화씨온도가 변경되면 단위가 f
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={handleCelsiusChange} />
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={handleFahrenheitChange} />
<BoilingVerdict
celsius={parseFloat(celsius)} />
</div>
);
}