Lifting State Up

이번엔 여러개의 component들 사이의 state공유에 대해 알아보자.

Shared State

state에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우를 말한다.
보통 가장 가까운 부모 component state를 공유해 사용한다.

state 공유 예제

// TemperatureInput.jsx ( 하위 컴포넌트 ) 

const scaleNames = {
    c: '섭씨',
    f: '화씨',
}

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>
    );
}

export default TemperatureInput;

// Calculator.jsx ( 상위 부모 컴포넌트 )
import React, { useState } from "react";
import TemperatureInput from "./TemperatureInput";
// 하위 컴포넌트 import

function BoilingVerdict(props) { // 조건부 렌더링 celsius가 100 이상 => 물이 끓는다
    if(props.celsius >= 100) {
        return <p>물이 끓습니다.</p>
    }
    return <p>물이 끓지 않습니다.</p>
}

function toCelsius(fahrenheit) { // 섭씨로 변환 
    return ((fahrenheit - 32) * 5 ) / 9;
}

function toFahrenheit(celsius) { // 화씨로 변환 
    return (celsius * 9) / 5 + 32;
}

function tryConvert(temperature, convert) { // 단위 변환 
    const input = parseFloat(temperature);
    if (Number.isNaN(input)) { // number가 아닐 시 공백 return
        return '';
    }
    const output = convert(input);
    const rounded = Math.round(output * 1000) / 1000;
    return rounded.toString();
}

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>

            <TemperatureInput 
                scale = 'c'
                temperature = {celsius}
                onTemperatureChange= {handleCelsiusChange}
                />
            <TemperatureInput 
                scale = 'f'
                temperature = {fahrenheit}
                onTemperatureChange= {handleFahrenheitChange}
                />  
            <BoilingVerdict celsius= {parseFloat(celsius)}/>

        </div>

    )
}

export default Calculator;

react에서 code를 효율적으로 작성 하려면, 컴포넌트를 작게 나누고, 재사용 가능한 형태로 개발 하는게 좋다.