[React] (리액트 공부하기 31) Shared State (공유 상태)

1. Shared State의 개념

• Shared State는 이름 그대로 공유된 상태를 의마한다.
• 여러 컴포넌트가 동일한 데이터를 필요로 할 때, 데이터를 각각의 컴포넌트 내부에 따로 정의하지 않고, 공통된 부모 컴포넌트에서 상태를 정의하여 하위 컴포넌트들이 이를 공유하는 방식이다.

예제:

1. 부모 컴포넌트의 state는 값 value: 2를 저장하고 있다.
2. 자식 컴포넌트 A와 B는 부모 컴포넌트로부터 해당 상태를 props로 받아 데이터를 표시하거나 계산에 사용한다.

• 컴포넌트 A: value + 2 = 4
• 컴포넌트 B: value + 4 = 6

이러한 방식으로 각 자식 컴포넌트가 자신만의 state를 가지지 않고, 부모 컴포넌트의 state를 공유한다. 이를 통해 데이터의 일관성과 관리가 더 간단해진다.

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

Boiling Verdict 컴포넌트

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

• 입력받은 섭씨 온도(celsius)가 100도 이상이면 물이 끓습니다.를 출력하고, 그렇지 않으면 물이 끓지 않습니다.를 출력한다.
• 이 컴포넌트는 props를 통해 부모 컴포넌트로부터 데이터를 전달받아 동작한다.

Calculator 컴포넌트

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

1. 부모 컴포넌트에서 useState를 사용해 섭씨 온도를 관리한다.
2. <input>태그는 사용자의 입력값을 받아 onChange 이벤트 핸들러를 통해 부모 컴포넌트의 state를 업데이트한다.
3. Boiling Verdict 컴포넌트에 섭씨 온도 값을 props로 전달하여 물이 끓는지 여부를 판단한다.

---

3. 입력 컴포넌트 추출하기

부모 컴포넌트(Calculator) 내의 온도 입력 부분을 별도의 TemperatureInput 컴포넌트로 분리한다. 이를 통해 섭씨와 화씨 온도를 입력받는 두 개의 독립된 컴포넌트를 생성할 수 있다.

TemperatureInput 컴포넌트

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

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

• 온도 입력 필드가 있다.
• 부모로부터 전달받은 scale에 따라 섭씨 또는 화씨를 표시한다.
• 입력값은 onChange 이벤트를 통해 부모 컴포넌트로 전달된다.

Calculator 컴포넌트 변경

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

• 두 개의 TemperatureInput 컴포넌트를 렌더링하여 섭씨와 화씨 입력을 각각 처리한다.
• scale이라는 추가적인 props를 사용해 입력 단위를 구분한다.

---

4. 온도 변환 함수 작성

섭씨와 화씨 온도 간의 변환을 처리하기 위해 다음 함수를 작성한다.

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

• toCelsius: 화씨 -> 섭씨로 변환
• toFahrenheit: 섭씨 -> 화씨로 변환

toConvert 함수

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

• 입력받은 온도를 변환하는 함수이다.
• 숫자가 아닌 값을 입력받으면 빈 문자열을 반환하여 예외 처리를 한다.

5. Shared State 적용하기

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

const handleChange = (event) => {
  // 변경 전: setTemperature(event.target.value);
  props.onTemperatureChange(event.target.value);