[React] 10. React 상태 올리기 (React Lifting State Up)

상태 올리기의 원리는 간단합니다.
하위 Component에 props로 상위 Component의 함수를 전달해 주고, 하위 Component 에서는 그 함수를 호출하는 것입니다.


주의사항
가장 가까운 상위 Component로 전달한다. 무조건적으로 최상위 App Component로 올리지 않는다.
그러나, 되도록 하향식 데이터 흐름에 초점을 두고 작업하는 것이 좋다.

참고 : ko.reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down

State and Lifecycle – React

---

상위 Component 함수로 prop가 전달되고 나면, 하위 component는 props 값을 변경하는 것이 불가능합니다.
(props가 읽기전용이기 때문)

Props 제어방법

아래와 같이 상위 Component 함수로 prop가 전달되고 난 후에는 아래와 같이 제어한다.
ex) TemperatureInput에서 온도를 갱신하고 싶으면 this.props.onTemperatureChange를 호출하면 됩니다.

  handleChange(e) {
    // Before: this.setState({temperature: e.target.value});
    this.props.onTemperatureChange(e.target.value);
    // ...

CodePen에서 실행하기

 

출처 : ko.reactjs.org/docs/lifting-state-up.html
출처: https://blog.sonim1.com/185 [Kendrick's Blog]