React: Lifting State Up 🏋️‍♀️

React: Lifting State Up 🏋️‍♀️

 

React에서 상태 관리의 기본 원칙 중 하나는 단방향 데이터 흐름입니다. 하지만 때로는 하위 컴포넌트 간의 데이터를 공유해야 하는 경우가 발생하죠. 이런 상황에서 사용되는 패턴이 바로 **Lifting State Up(상태 끌어올리기)**입니다. React 공식 문서 Lifting State Up을 기반으로, 더 많은 설명과 실전 예제를 추가해 상세히 다뤄보겠습니다. 🌟

 

Lifting State Up이란?

 

React에서는 **상태(state)**가 일반적으로 컴포넌트 내부에서 관리됩니다. 하지만, 여러 컴포넌트가 동일한 데이터를 공유하거나 조작해야 할 때, 상태를 각 컴포넌트에 분산시키는 대신 가장 가까운 공통 상위 컴포넌트로 끌어올리는 것이 React의 권장 방식입니다.

 

왜 상태를 끌어올릴까?

• 데이터 동기화: 여러 컴포넌트에서 동일한 데이터를 공유해야 할 때, 상위 컴포넌트에서 상태를 관리하면 데이터의 일관성을 유지할 수 있습니다.

• 단방향 데이터 흐름: React는 부모에서 자식으로 데이터를 전달하는 단방향 흐름을 강조합니다. 상태를 끌어올리면 이 원칙을 유지하면서 데이터 흐름을 예측 가능하게 만듭니다.

 

Lifting State Up의 기본 원리

 

예제: 두 입력값을 동기화하는 온도 변환기 만들기

 

React 공식 문서의 간단한 예제인 온도 변환기를 확장해 보겠습니다.

 

1️⃣ 컴포넌트별 역할 분리

• BoilingVerdict: 온도가 100°C 이상일 때 물이 끓는지 여부를 표시합니다.

• TemperatureInput: 온도를 입력받는 컴포넌트입니다.

• Calculator: 상태를 끌어올려 두 TemperatureInput 컴포넌트를 동기화합니다.

 

초기 구현 코드

 

function BoilingVerdict({ celsius }) {

  return celsius >= 100 ? <p>물이 끓어요!</p> : <p>물이 끓지 않아요.</p>;

}

 

function TemperatureInput({ scale, temperature, onTemperatureChange }) {

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

 

  return (

    <fieldset>

      <legend>온도를 입력하세요 (단위: {scaleNames[scale]})</legend>

      <input

        value={temperature}

        onChange={(e) => onTemperatureChange(e.target.value)}

      />

    </fieldset>

  );

}

 

function Calculator() {

  const [temperature, setTemperature] = React.useState("");

  const [scale, setScale] = React.useState("c");

 

  const handleCelsiusChange = (temp) => {

    setScale("c");

    setTemperature(temp);

  };

 

  const handleFahrenheitChange = (temp) => {

    setScale("f");

    setTemperature(temp);

  };

 

  const tryConvert = (temp, convert) => {

    const input = parseFloat(temp);

    if (Number.isNaN(input)) return "";

    return (Math.round(convert(input) * 1000) / 1000).toString();

  };

 

  const celsius =

    scale === "f" ? tryConvert(temperature, (f) => ((f - 32) * 5) / 9) : temperature;

  const fahrenheit =

    scale === "c" ? tryConvert(temperature, (c) => (c * 9) / 5 + 32) : temperature;

 

  return (

    <div>

      <TemperatureInput

        scale="c"

        temperature={celsius}

        onTemperatureChange={handleCelsiusChange}

      />

      <TemperatureInput

        scale="f"

        temperature={fahrenheit}

        onTemperatureChange={handleFahrenheitChange}

      />

      <BoilingVerdict celsius={parseFloat(celsius)} />

    </div>

  );

}

 

동작 방식

• Calculator에서 상태(temperature, scale)를 관리합니다.

• 상태 변경 핸들러를 props로 전달하여 TemperatureInput이 상태를 업데이트할 수 있게 합니다.

• 입력값은 서로 동기화되고, BoilingVerdict는 업데이트된 상태를 기반으로 적절한 메시지를 표시합니다.

 

상태 끌어올리기의 장단점

 

✅ 장점

1. 데이터 일관성: 공통된 상태를 상위 컴포넌트에서 관리해 여러 컴포넌트 간의 데이터 불일치를 방지합니다.

2. 단방향 데이터 흐름 유지: React의 핵심 철학인 데이터 흐름을 단순하고 예측 가능하게 만듭니다.

3. 유지보수성 증가: 상태 관리와 비즈니스 로직이 한 곳에 모이므로 코드가 더 직관적입니다.

 

❌ 단점

1. 상위 컴포넌트가 비대해짐: 상태와 로직이 많아질수록 상위 컴포넌트가 복잡해질 수 있습니다.

2. 중첩된 구조에서의 어려움: 상태를 너무 많이 끌어올리면 깊게 중첩된 컴포넌트에서 props를 전달하는 과정이 길어질 수 있습니다.

 

추가: Context와 상태 끌어올리기의 조화

 

상태 끌어올리기만으로는 모든 문제를 해결하기 어렵습니다. React Context를 사용하면 전역 상태를 관리하면서 상위 컴포넌트를 간결하게 유지할 수 있습니다.

 

예제: Context로 상태 공유하기

 

const TemperatureContext = React.createContext();

 

function TemperatureProvider({ children }) {

  const [temperature, setTemperature] = React.useState("");

  const [scale, setScale] = React.useState("c");

 

  const contextValue = {

    temperature,

    scale,

    setTemperature,

    setScale,

  };

 

  return (

    <TemperatureContext.Provider value={contextValue}>

      {children}

    </TemperatureContext.Provider>

  );

}

 

function TemperatureInputWithContext({ scale }) {

  const { temperature, scale: currentScale, setTemperature, setScale } =

    React.useContext(TemperatureContext);

 

  const handleChange = (temp) => {

    setScale(scale);

    setTemperature(temp);

  };

 

  const value =

    scale === "c"

      ? currentScale === "f"

        ? ((temperature - 32) * 5) / 9

        : temperature

      : currentScale === "c"

      ? temperature * 9 / 5 + 32

      : temperature;

 

  return (

    <fieldset>

      <legend>온도를 입력하세요 (단위: {scale === "c" ? "섭씨" : "화씨"})</legend>

      <input

        value={value}

        onChange={(e) => handleChange(e.target.value)}

      />

    </fieldset>

  );

}

 

function App() {

  return (

    <TemperatureProvider>

      <TemperatureInputWithContext scale="c" />

      <TemperatureInputWithContext scale="f" />

    </TemperatureProvider>

  );

}

 

결론

 

상태 끌어올리기는 React에서 컴포넌트 간 데이터 공유를 위한 기본적이면서 강력한 패턴입니다.

• 간단한 애플리케이션에서는 상태 끌어올리기만으로 충분하지만,

• Context API 또는 전역 상태 관리 라이브러리(e.g., Redux, Zustand)를 함께 사용하면 복잡한 앱에서도 효율적으로 상태를 관리할 수 있습니다.

 

🌷전설의 개발자가 되어봅시당!🌷