[React.js] 10. state 끌어올리기

직역을 한것인지 최대한 설명을 하려고 노력한것인지 "state 끌어올리기"라는 말이 와닿지 않았다.

지금까지 공부해본 것을 토대로 생각해보면 state는 현재 Component내에서 바뀔 수 있는 값이다.

(어떻게 보면 rerender를 위한 값이다.)

 

그렇다면 아래와 같이 Custom Component 를 다른 Component에서 호출해서 사용할 경우 값을 어떻게 동기화 시킬까의 문제가 발생한다.

 

 

ex) 화씨와 섭씨의 값을 하나로 동기화 시켜서 관리하고 싶은 경우

class Calculator extends React.Component {
  render() {
    return (
      <div>
        <TemperatureInput scale="c" />
        <TemperatureInput scale="f" />
      </div>
    );
  }
}

 

 

TemperatureInput Component 내에서 state 를 관리하고 있지만, 이 값을 Calculator Component에서는 자식의 state에 접근하지 못한다.

 

 

위 그림에서 TemperatureInput Component는 각각의 state를 관리하므로 하나로 관리할 수 없다는 것을 알 수 있다.

하나의 동기화된 데이터를 가지고 관리를 하려면 Calculator Component에 있는 state를 하나의 동기화된 데이터로 사용하고, 이 값이 바뀔때마다 자식들에게 알려주면 해결할 수 있다.

 

 

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: '', scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

 

자식 Component에서 onChange 이벤트가 발생했을때 event handler 에 따라 동작하게 되는데, event handler자체를 부모에 있는 event handler와 연결해두었기 때문에 부모의 state값도 수정할 수 있게된다.

위 예제 코드의 경우 자식 onchange event 발생 -> 부모 event handler -> 부모 state 값 수정 -> 부모 render 함수 호출 -> 수정된 부분 rerender 순으로 동작한다.

 

 

위와 같이 작성해주면, 아래와 같이 부모에서 생성된 Component의 값이 바뀔때마다 부모의 Event Handle에 따라 값을 수정할 수 있게 된다.