Lifting State Up

Shared State

하나의 데이터를 여러 개의 컴포넌트에서 처리해야 하는 경우가 있기도 하다. 이런 경우, 자식 컴포넌트들의 State를 부모 컴포넌트의 State를 공유해서 처리하는 것이 더 효율적이다.

Lifting State Up

하위 컴포넌트의 State를 상위 컴포넌트로 올림

예시

// 온도에 따라 물이 끓는지, 안 끓는지를 출력하는 컴포넌트
function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>물이 끓습니다.</p>;
  }
  return <p>물이 끓지 않습니다.</p>;
}

...

// 표기 방식에 따라 온도를 다르게 처리하는 컴포넌트
const scaleNames = {
  c: '섭씨',
  f: '화씨'
};

function TemperatureInput(props) {  
  const handleChange = (event) => {
    props.onTemperatureChange(event.target.value);
  };
  
  return (
    <fieldset>
      <legent>
        온도를 입력해 주세요(단위:{scaleNames[props.scale]}):
      </legent>
      <input
        value={props.temperature}
        onChange={handleChange} />
    </fieldset>
  );
}

...

// 온도 계산 함수
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();
}

...

// 
function Calculator(props) {
  const [temperature, setTemperature] = useState('');
  const [scale, setScale] = useState('c');
  
  const handleCelsiusChange = (temperature) => {
    setTemperature(temperature);
    setScale('c');
  };
  
  const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperatrue;
  const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
  
  return (
    <div>
      <TemperatureInput 
        scale="c"
        temperature={celsius}
        onTemperatureChange={handleCelsiusChange} />
      <TemperatureInput 
        scale="f"
        temperatrue={fahrenheit}
        onTemperatureChange={handleFahrenheitChange}/>
      <BoilingVerdict
        celsius={parseFloat(celsius)} />
    </div>
  );
}

Referance

[인프런] 처음 만난 리액트(React) 강의 - 소플