No.8 State

🤨 宿題をする前にstateとpropsを復習して、もう一度書いてみます.

State

state=ステータス、エレメントのステータス値と呼ばれます.stateは構成部品ステータスのあるオブジェクトで、データを変更するたびに効率的に画面に表示されます.次に、stateをclass素子で表す例を示します.
例のソルバとsuperについては、次の文書を参照してください.
https://ko.reactjs.org/docs/react-component.html#constructor

import React from 'react';

class State extends React.Component {
  constructor(props) {
    super(props); {/*constructor & super는 초기화 과정이며, 둘은 필수로 들어가야한다 생각하면된다! */}
    this.state = {
      color: 'red'
    }; {/* this.state는 초기 상태의 컬러를 red로 지정 */}
  }

  render() {
    return (
      <div>
        <h1 style={{color: this.state.color}}>State</h1>
        {/* {} -> 자바스크립트라고 알리는것 {{}} 자바스크립트 안에 객체라고 알리는것! */}
      </div>
    );
  }
}

export default State;

これはターゲット(ここではState)、thisを指します.stateは現在の構成部品のstateオブジェクトであると考え、コードを理解します!だから、this.state.colorとは、State素子のcolor値がredに等しいことを意味する.
💡 背景色を与えるにはjsのようにcamal case(=backgroundColor:"red")を使うべきです.

setState

stateの値は直接変更できないのでsetStateを使うことも考えられますが、なぜ直接変更できないのか、reactの動作原理を考えればいいのです!reactは仮想DOMを使用して既存のDOMとは異なる場所をレンダリングし、state値を直接変更すると、reactはこの状況を理解してレンダリングできません.(🤪 気持ちいいけど面倒くさい団地ってバカお兄ちゃんみたいな感じかな…)したがって、ステータス値をsetStateに更新できます.(setStateは私たちが任意に指定した方法ではなく、reactの方法です!)

import React from 'react';

class State extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'red'
    };
  }

  handleColor = () => {
    this.setState({
      color: 'blue'
    }) {/* red에서 blue로 업데이트!! or 덮어씌운다! 라고 생각하자 */}
  }

  render() {
    return (
      <div>
        <h1 style={{color: this.state.color}}>State</h1>
        <button onClick={this.handleColor}>changeColor</button>
      </div>{/* onclick이 아니라 on'C'lick이다. */}
    );
  }
}

export default State;

上のコードを見て!buttonをクリックしてhandleColorを呼び出し、handleColorはsetState関数を呼び出します.setStateはstateの状態を更新するので、state(=color)は赤から青に変わります.
コロナワクチンを2回打って、2日間死体のように過ごしました・・・本当に疲れた...もう一度勉強します...😭😭😭😭😭