State 끌어올리기

상태 끌어올리기, 리액트는 단방향 데이터 흐름이라는 원칙에 따라, 하위 컴포넌트에서 상위컴포넌트로 갈 수 없습니다. 하지만 상위 컴포넌트의 '상태를 변경하는 함수' 그 자체를 하위컴포넌트에 전달하여 , 이 함수를 하위컴포넌트에서 실행 하여 해결합니다.

콜백함수로 props를 전달, 인자로 보내지는 콜백함수는 내부 state를 변동시키는 함수입니다. 해당 콜백함수를 자식에게 보내주고 , 자식에서 해당 함수를 호출하면 부모의 state가 변동되는 것입니다.

1) 예시

function Parent Component() {
	const [value, setValue] = useState("날 바꿔줘!")
    
    const handleChangeValue = () => {
    	setValue("완젼히 달라진 값!")
    }
    return {
    	<div>
      <div>값은 {value} 입니다.</value>
  	<ChildComponet handleButtonClick = {handleChangeValue} /> //하위 컴포넌트에 함수를 전달!
      </div>
    }
}


function ChildComponent({handleBuffonClick}) { // 비구조화 할당
	const handleClick = () => {
    	handleButtonClick('넘겨줄께 자식이 원하는 값!')
    }
    return (
    	<button onClick = {handleClick}>값 변경</button>
    )
}

2) 예시

주어진 온도에서 물의 끓는 여부를 추정하는 온도 계산기

// 컴포넌트 작성
function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

//  변환 함수 작성
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();
}

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

//2단계 : input 추가하기

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

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

  handleChange(e) {
    this.props.onTemperatureChange({temperature: e.target.value}); //변경! 
    //이 컴포넌트의 props는 부모 컴포넌트인 calculaotr로부터 제공받은 것
  }

  render() {
    const temperature = this.props.temperature; //state를 props로 변경
    //자신의 부모인 calculator로부터 props를 건네받음
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>
    );
  }
}