Lifting State Up

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

Shared State

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

하나의 데이터를 여러 개의 컴포넌트에서 표현

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

물의 끓음 여부를 나타내는 컴포넌트를 만들어 보자

import { useState } from "react";

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

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

입력 컴포넌트 추출하기

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} />
            celsius={parseFloat(temperature)} />
        </fieldset>
    )
}

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

온도 변환 함수 작성하기

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)) {
        return '';
    }
    const output = convert(input);
    const rounded = Math.round(output * 1000) / 1000;
    return rounded.toString();
}

tryConvert('abc', toCelsius);       // empty string을 리턴
tryConvert('10.22', toFahrenheit)   // '50.396'을 리턴

Shared State 적용하기

function TemperatureInput(props) {
   ...
    return (
            // 변경 전 : <input value={temperature}onChange={handleChange} />
            <input value={props.temperature}onChange={handleChange} />
   ...
    )
}

const handleChange = (event) => {
        // 변경 전 : setTemperature(event.target.value);
        props.onTemperatureChange(event.target.value);
    }
    
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>
    )
}

Calculator 컴포넌트 변경하기

function Calculator(props) {
    const [temperature, setTemperatrue] = useState('');
    const [scale, setScale] = useState('c');

    const handleCelsiusChange = (temperature) => {
        setTemperatrue(temperature);
        setScale('c');
    }

    const handleFahrenheitChange = (temperature) => {
        setTemperatrue(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>
    )
}