[React] React.js 튜토리얼 7- State 끌어올리기

 

 

 

이미지출처: https://velog.io/@hyejeong/%EC%99%9C-React%EB%A5%BC-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C

 

 

 

이전 포스팅을 보려면 아래 링크를 눌러주세요.

 

 

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

[React] React.js 튜토리얼 3- 이벤트 처리하기

[React] React.js 튜토리얼 3- 이벤트 처리하기

[React] React.js 튜토리얼 4- 조건부 렌더링

[React] React.js 튜토리얼 4- 조건부 렌더링

[React] React.js 튜토리얼 5- list와 key

[React] React.js 튜토리얼 5- list와 key

[React] React.js 튜토리얼 6- 폼(Form)

 

 

 

이번에는 State 끌어올리기에 대해서 배워보겠습니다.

동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할때, 공통 state를 끌어올리는 것이 좋습니다.

예제로 화씨와 섭씨를 입력해 두개 중 하나에 온도를 입력하면,

섭씨는 화씨로, 화씨는 섭씨로 변환하여 보여주도록 해봅니다.

먼저 화씨와 섭씨를 입력하는 폼을 만들어봅시다.

 

// 화씨와 섭씨
const scaleNames = {
  c: 'Celsius',
  f: 'Fahrenheit'
};

// 온도 입력 클래스
class TemperatureInput 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;
    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 {
  render() {
    return (
      <div>
        <TemperatureInput scale="c" />
        <TemperatureInput scale="f" />
      </div>
    );
  }
}

 

 

 

위의 코드는 아직 둘중 한 폼에 온도를 입력하더라도 다른 폼은 갱신되지 않고 있습니다.

입력된 온도 정보가 TemperatureInput 안에 있으므로 Calculator는 그 값을 알 수 없기 때문입니다.

현재 두 TemperatureInput 컴포넌트는 각각 입력값을 각자의 state에 독립적으로 저장하고 있습니다.

Calculator가 공유 state를 소유하도록 하여 서로간에 일관된 값을 유지하도록 만들어봅시다.

먼저, 화씨와 섭씨간의 변환 함수를 작성합니다.

 

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

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

 

 

 

그리고나서, TemparatureInput 컴포넌트에서 this.state.temperature를 this.props.temperature로 변경해줍니다.

이제 TemperatureInput는 props를 자신의 부모인 Calculator로 부터 건네받도록 할 것입니다.

 

class TemperatureInput extends React.Component {
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = { temperature: '' }; // 온도
  }
  // 입력이벤트
  handleChange(e){
    // Before: this.setState({temperature: e.target.value});
    this.props.onTemperatureChange(e.target.value);
  }
  render(){
    //Before: const temperature = this.state.temperature;
    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>
    )
  }
}

 

 

 

 

이제 Calculator 컴포넌트에서 화씨와 섭씨에 온도입력 시 다른 입력 필드의 값을 계산하여 보여주도록 해봅시다.

 

 

// 두 개의 온도 입력 필드 생성
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"};
  }
  // Celsius 값 변경 시 
  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }
  // Fahrenheit 값 변경 시 
  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    // 값 변환하여 넣어주기
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? toCelsius(temperature) : temperature;
    const fahrenheit = scale === 'c' ? toFahrenheit(temperature) : temperature;
    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
      </div>
    );
  }
}

 

 

 

이제 실행시켜서 값을 입력해보면, 두 폼의 값이 공유되면서 화씨와 섭씨가 정상적으로 변환되는 것을 확인할 수 있습니다.

 

 

 

 

 

 

참고한 React 문서 URL입니다.

https://ko.legacy.reactjs.org/docs/lifting-state-up.html

State 끌어올리기 – React

 

 

 

 

 

 

다음 포스팅에서는 합성 vs 상속에 대해서 알아보겠습니다.