가장 쉬운 리액트 9강

가장 쉬운 웹개발 with Boaz

9.Lifting state up

9.Lifting state up

이것이 state를 끌어올리는 것, 즉 lifting state up이다.

현재 상태를 가진 component로 부모 component로 state를 끌어올리는 것이다.
여러 component들에게 data의 변화를 모두 반영해야 할 때
각 component의 state를 통합해야 한다.
통합한 state는 가장 가까운 부모 component가 관리한다. 그러면 자식 component에 props로 내려줄 수 있다.

온도 계산 component를 예시로 lifting state up 설명

2가지 다른 종류 의 온도를 입력받을 수 있는 component를 만들자.
하나를 입력하면 동시에 다른 하나가 업데이트 되는 component이다.
입력받은 온도를 계산하여 물이 끓는지 표시하는 이 component를
예시로 활용하여 lifting state up 과정을 알아보자.

먼저, BoilingVerdict라는 component를 만들겠다.
props로 celsius 온도를 받아서, 그 온도가 물이 끓 수 있는 온도인지 나타내는 component이다.

function BoilingVerdict(props) {
  if(props.celsius >= 100) {
    return <p>The water would boil.</p>
  }
  return <p>The water would not boil.</p>
}

다음은 Calculator component이다.
<input>을 render하고 그 value값을 state로 관리한다.

class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {temperature: ''};  
  }

  handleChange(e) {
    this.setState({temperature: e.target.value});  
  }

  render() {
    const temperature = this.state.temperature;    
    return (
      <fieldset>
        <legend>Enter temperature in Celsius:</legend>
        <input          
        value={temperature}          
        onChange={this.handleChange} />
        <BoilingVerdict          
        celsius={parseFloat(temperature)} />
      </fieldset>
    );
  }
}

온도 계산 component를 예시로 lifting state up 설명

2가지 다른 종류 의 온도를 입력받을 수 있는 component를 만들자.
하나를 입력하면 동시에 다른 하나가 업데이트 되는 component이다.
입력받은 온도를 계산하여 물이 끓는지 표시하는 이 component를
예시로 활용하여 lifting state up 과정을 알아보자.

 

lifting state up을 한 최종 결과물

function BoilingVerdict(props) {
  if(props.celsius >= 100) {
    return <p>The water would boil.</p>
  }
  return <p>The water would not boil.</p>
} // Considering Rendering: 조건별 렌더링

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

const scaleNames = {
  c : 'Celsius',
  f: 'Fehrenheit'
};

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: temperature});
  }
  
  handleFahrenheitChange(temperature) {
    this.setState({scale:'f', temperature: temperature});
  }  
  
 render() { //render() 함수는 사실 바뀐 것 체크하는 용도일뿐. component 안의 메시지 바뀐다고 실제 DOM이 바뀌는 건 아니다.
   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>
   );
 }
}

// 실제 렌더링은 여기서 일어난다 => 바뀐 것만 다시 렌더링하므로 react가 빠른 것!
const root = ReactDOM.createRoot(document.getElementById('root')) 
root.render(<Calculator />);

Lifting state up의 과정 정리

Celsius TemperatureInput <input>에 값을 입력했다고 가정해보자.
아래와 같은 과정으로 render가 진행된다.

1. React는 Celsius TemperatureInput <input>(DOM)의 onChange를 call한다.
2. TemperatureInput의 handleChange가 실행된다.
3. TemperatureInput의 props인 onTemperatureChange에 할당된 함수(handleCelsiusChange)가 실행된다.
4. handleCeciusChange는 Cecius <input>에 입력한 값을 parameter로 받는다.
5. 내부에 Calculator의 state를 수정하는 setState가 실행된다.
6. Celsius <input>에 입력한 값을 반영하여 Calculator의 state가 수정된다.
7. Calculator는 state가 수정되었으므로 render를 실행시킨다.
8. Celsius TemperatureInput과 Fahrenheit TemperatureInput이 바뀐 값을 반영한다.
9. 그때 각 TemperatureInput의 <input> value는 celsius와 fahrenheit로 수정되어 할당된다.
10. 수정되어 할당된 value값을 반영하여 각 TemperatureInput의 render가 실행된다.
11. BoilingVerdict에게 수정된 celcius을 할당하고 render가 실행된다.
12. render가 실행되어 React가 UI의 바뀐부분을 알아차린다.
13. React는 ReactDOM을 실행시키고 ReactDOM이 바뀐부분 을 기존 DOM과 일치하도록 DOM을 업데이트 한다.

모든 업데이트가 위 과정으로 진행되므로 temperature는 sync를 유지한다.
(동시에 바뀔 수 있게 되었음)

개념 총 정리 및 활용

통합된 state는 React에서 중요하다. React는 top-down data flow로 흘러가기 때문이다.
즉, Lifting state를 활용하면 bug를 쉽게 찾아낼 수 있다.