React State , Props&Event

この記事は、上記のコード・カリキュラムに基づいて作成されています.

State

構成部品の内部構成部品のステータス値.
stateには、画面に表示する構成部品のUI情報(ステータス)を含むオブジェクトが含まれます.
stateは構成部品内で定義および使用され、データ(オブジェクト)はいつでも変更できます.

Stateオブジェクト

stateは、画面に表示する構成部品の情報(ステータス)を含むオブジェクトです.
次に、クラス構成部品のstate(すなわち、構成部品の状態をどのように定義するか)についてのコードを示します.

import React form 'react';

class State exends React.Component{
constructor(){
 super();
 this.state = { //컴포넌트의 초기 상태값 설정함 
 //컴포넌트의 state는 객체이다
 color :'red';
 };
}

render(){
 return (
  <div>
  <h1>Class Component | State </h1>
  </div>
 );
}
}

export default State;

構成部品のステータスをオブジェクト形式として定義
このことで何ができるだろうか.
また今度見ましょう.

State使用例

stateでステータス値を設定する理由は、最終的に素子内の要素にステータス値を反映し、データが変更されるたびに効率的に画面に表示されるためです.したがって,変化した値は素子外で定数として指定され,変化した値はstate内で管理される.
回文にはタイトル要素があります.
要素の文字色を構成部品設定のstate値に設定する場合は、次の操作を行います.
以下の手順に従います.
まず、JSX要素に行内文字スタイルを適用し、以下のように記述します.

<h1 style={{color: }}>  Class Component | State </h1>

オブジェクト(state)の特定のキー値にアクセスすることで、color属性の値として指定します.

<h1 style={{color: this.state.color}}>Class Component | State</h1>

this:構成部品
this.state:構成部品ステータスのオブジェクト
this.state.color:redオブジェクトの特定のキー(color)

Event & setState

import React, {Component} from 'react';

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

handleColor=()=>{
this.setState({
color:'blue';

})
}

render(){
return (
 <div>
 <h1 style={{color:this.state.color}}
 Class Component |State </h1>
 <button onClick={this.handleColor}>Click</button>
 </div>
);

}


}

export default State; 

Props

props : properties
名前の通り、構成部品のプロパティ値.
propsには親コンポーネントから伝達されたデータが含まれており、反応器内のすべてのコンポーネントにはflopsが内蔵されている.
propsでは、ステータスのステータス値、イベントハンドラを親コンポーネントに渡すことができます.

Propsオブジェクト

クラス構成部品で構成部品のプロパティを定義する方法を確認します

//Parent.js

import React from 'react';
import Child from '../pages/Child/Child';

class Parent extends React.Component{
  constructor(){
    super();
    this.state = {
     color:'red';
    };
  }
  
  render(){
    render(
     <div>
       <h1>Parent Component</h1>
       <Child />
     </div>
    
    );
  }
}

export default State; 

親コンポーネントParent.jsから構成部品をインポート
親状態のデータをpropsを介して構成部品に渡します.

//Parent.js 

import React from 'react';
imort Child from '../pages/Children/Childresn';

class Parent extends React.Component{
 constructor(){
   super();
   this.state ={
      color:'red';
   };
 }
 
 render(){
   return (
      <div>
        <h1>Parent Component </h1>
        <Child titleColor={this.state.color}/>
      </div>
   
   );
 
 }
}

export default State; 

サブ構成部品のタイトルColorプロパティをpropsとして作成
this.state.color-親コンポーネントのステータスオブジェクトにcolor値を渡す
では、構成部品内部で伝達されるpropsデータの使用方法を見てみましょう.

propsオブジェクト

stateと同様に、構成部品のpropsはオブジェクトです
Child.js内部でpropsオブジェクトの外観を確認しましょう

//Child.js 
import React from 'react';

class Child extends React.Component{
 render(){
   
   //console.log(this.props) => q부모로부터 전달받은 객체가 key-value 형태로 들어있다. 
   return (
      <div>
       <h1 style={{color : this.props.titleColor}}> Child Component</h1>
      </div>
   );
 }
}
export default State; 

export default State;