2021_05_07

TIL - React State, Lifecycle

1. React State

反応におけるstateとは、素子の使用において、素子内部で変化可能な値を指す.
逆にpropsとは、外部(親コンポーネント)から渡される値を指します.
state:構成部品内部で変化する値
props:外部から渡された値
また,propsとは異なり,状態値を変更する際に直接操作することはできず,setStateメソッドを用いて変更する必要がある.
リアクターでは、状態が変化するたびに変更された部分が検出されてレンダリングされますが、setStateメソッドを使用して直接状態値を変更しないと、変更は検出されず、レンダリングされません.
次の例では、propsとstateの使用方法を示します.
(1)propsの使用

function App() {
  return (
    <div calssName="App">
      <Twittler name="나의 새 트윗"/> //8번째 줄에서 작성한 Twittler 라는 함수를 부른다.
    </div>
  );
}
function Twittler(props) { // 4번째 줄에서 함수를 부를 때 전달인자로 넘겨준 데이터(name)을 props로 받는다.
  return(
    <li>
      <div>{props.name}</div> //props.name === "나의 새 트윗"
    </li>
  )
}

これまでpropsは「外部から伝達された値」と呼ばれていた.Twitter関数の立場では、親のアプリでTwitterを呼びながら、nameというアイテムを伝えています.
(2)状態の使用

//state를 갖는 컴포넌트를 만들기 위해서는 함수 컴포넌트가 아닌 클래스 컴포넌트로 만들어야 한다.
class ToggleSwitch extends React.Component { 
  constructor(props) { //생성자
    super(props); //부모 컴포넌트가 보내준 props를 받는다.
    this.state = {isOn: false}; //생성자 안에서 this.state를 이용해서 기본 상태를 지정한다.
    this.handleClick = this.handleClick.bind(this); // 이벤트 할당시 바인딩을 해주어야 한다.
  }
  handleClick() {
    this.setState(state => ({ //state 값을 변경하기 위해 setState 메소드를 이용한다.
      isOn: !state.isOn //ON이면 OFF로, OFF면 ON으로 상태를 변경한다.
    }));
  }
  render() {
    return <h1><button onclick={this.handleClick} ~~/*중략*/~~ </h1>
  }
}

5行目で説明したように、イベントを接続するときにバインドする必要があります.
これは、バインドしない場合はrenderメソッドでthisするためです.handleClick関数を呼び出すと、関数のthisがwindowまたはundefinedになるからです.したがって、windowまたはundefinedにはsetStateメソッドがないので、this.setStateの呼び出し中にエラーが発生しました.
簡単に言えば、これは.HandleClickが動いた瞬間setStateがwindowまたはundefinedであるため、実行中にエラーが発生しました.

2. Lifecycle

反応素子にはライフサイクルがある.たとえば、構成部品を作成するとき、新しい状態のとき、画面上で消える前に、異なる瞬間が発生することがあります.また、このような状況が発生するたびに、構成部品が再レンダリングされます.(画面が消える前を除く)

ライフサイクルをグラフで表す図.重要なタイミングが発生するたびに、各ライフサイクルメソッドがレンダリングされ、呼び出されます.(1) render--クラスコンポーネントで実装する必要があります.
--作成時に、更新時にレンダリング方法で構成部品が再レンダリングされます.(2) constructor--主にステータス初期化またはイベント割り当て時のバインド操作を行います.
--superキーを使用して、親コンポーネントに渡されるpropsを取得します.(3) componentDidMount--コンポーネントが画面に表示された後に呼び出されます.(4) componentDidUpdate--構成部品に新しいステータスがある場合に呼び出されます.(5) componentWillUnMount--画面が消える(アンインストール)前に呼び出されます.
この授業はstateとlifecycleを勉強しました.
次の授業では、反応中のデータストリーム、アップグレード状態upについて学びます.
今日はここまで!!