[React.js] React 상태 끌어올리기 (Lifting State Up)

React 상태 끌어올리기 (Lifting State Up)란 무엇인가?

React에서 컴포넌트 간 상태를 관리하는 것은 애플리케이션 설계의 핵심 요소입니다. 컴포넌트가 서로 독립적으로 동작하면서도 데이터가 필요할 때 어떻게 효율적으로 교환할 수 있을까요? 이를 해결하기 위해 "상태 끌어올리기 (Lifting State Up)"라는 패턴이 자주 사용됩니다.

---

🚀 상태 끌어올리기의 개념

상태 끌어올리기란 React에서 두 개 이상의 컴포넌트가 동일한 데이터를 필요로 할 때, 그 데이터를 최상위 공통 조상 (Common Ancestor) 컴포넌트로 이동시키는 것을 의미합니다. 이로 인해 하위 컴포넌트는 props를 통해 데이터를 공유하고, 최상위 컴포넌트는 상태를 관리하는 역할을 맡습니다.

---

🚀 왜 상태를 끌어올려야 할까?

데이터 일관성 유지: 동일한 데이터를 공유하는 여러 컴포넌트가 있을 경우, 상태를 끌어올리면 데이터가 일관되게 관리됩니다.
컴포넌트 간 데이터 교환 용이: 상태를 한 곳에서 관리하면 데이터 흐름이 명확해지고 디버깅이 쉬워집니다.
React의 단방향 데이터 흐름 준수: 상태 끌어올리기는 React의 철학인 단방향 데이터 흐름을 강화합니다.

---

🚀 상태 끌어올리기의 장단점

장점

1. 데이터 관리 일원화: 여러 컴포넌트에서 데이터를 공유할 때 데이터의 일관성을 유지할 수 있습니다.
2. 컴포넌트 간 데이터 흐름 명확: 단방향 데이터 흐름을 따르므로 디버깅과 유지보수가 쉽습니다.
3. 재사용성 증가: 상태를 관리하는 로직을 분리하여 더 유연한 컴포넌트를 설계할 수 있습니다.

단점

1. 상위 컴포넌트 복잡도 증가: 상태를 관리하는 로직이 상위 컴포넌트에 집중되므로 코드가 복잡해질 수 있습니다.
2. 많은 props 전달: 하위 컴포넌트로 데이터를 전달하기 위해 props 체인이 길어질 수 있습니다.

 

---

🚀  예제 : 온도 변환기 만들기

두 개의 입력 필드에서 섭씨(Celsius)와 화씨(Fahrenheit) 온도를 변환하는 애플리케이션을 만들어봅시다. 두 입력 필드는 동일한 데이터를 공유해야 합니다.

부모 컴포넌트: TemperatureCalculator
자식 컴포넌트: TemperatureInput, BoilingVerdict

import React, { useState } from "react";
 
function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  const scaleNames = {
    c: "섭씨",
    f: "화씨",
  };
 
  const handleChange = (e) => {
    onTemperatureChange(e.target.value);
  };
 
  return (
    <div>
      <label>{scaleNames[scale]} 온도:</label>
      <input value={temperature} onChange={handleChange} />
    </div>
  );
}
 
function BoilingVerdict({ celsius }) {
  return celsius >= 100 ? <p>물이 끓습니다.</p> : <p>물이 끓지 않습니다.</p>;
}
 
function toCelsius(fahrenheit) {
  return ((fahrenheit - 32) * 5) / 9;
}
 
function toFahrenheit(celsius) {
  return (celsius * 9) / 5 + 32;
}
 
function TemperatureCalculator() {
  const [temperature, setTemperature] = useState("");
  const [scale, setScale] = useState("c");
 
  const handleCelsiusChange = (temperature) => {
    setScale("c");
    setTemperature(temperature);
  };
 
  const handleFahrenheitChange = (temperature) => {
    setScale("f");
    setTemperature(temperature);
  };
 
  const celsius = scale === "f" ? toCelsius(temperature) : temperature;
  const fahrenheit = scale === "c" ? toFahrenheit(temperature) : temperature;
 
  return (
    <div>
      <TemperatureInput
        scale="c"
        temperature={celsius}
        onTemperatureChange={handleCelsiusChange}
      />
      <TemperatureInput
        scale="f"
        temperature={fahrenheit}
        onTemperatureChange={handleFahrenheitChange}
      />
      <BoilingVerdict celsius={parseFloat(celsius)} />
    </div>
  );
}
 
export default TemperatureCalculator;

코드 설명

1. TemperatureInput 컴포넌트:
   • 섭씨와 화씨 값을 입력받는 입력 필드 역할을 합니다.
   • 부모 컴포넌트로부터 temperature와 onTemperatureChange를 props로 전달받습니다.
2. BoilingVerdict 컴포넌트:
   • 현재 온도가 물의 끓는점(섭씨 100도) 이상인지 표시합니다.
3. TemperatureCalculator 컴포넌트:
   • 상태를 끌어올려 섭씨와 화씨 데이터를 중앙에서 관리합니다.
   • temperature와 scale 상태를 이용해 데이터를 변환하고 하위 컴포넌트로 전달합니다.

---

🚀 결론

상태 끌어올리기는 React 애플리케이션에서 상태 관리를 단순화하고 데이터 흐름을 명확히 하는 강력한 패턴입니다. 하지만 상위 컴포넌트가 지나치게 복잡해지는 것을 방지하기 위해 Context API, Redux와 같은 상태 관리 도구와 적절히 조합하여 사용하는 것이 좋습니다.