[TIL]21.05.20

まだフレームワークに触れたことはありませんが、Reactについては本当によくわかりませんが、これまで感じていたReaceのメリットはコンポーネント形式で開発されていることですが、いずれにしてもWeb上でアプリケーションのように実現できるSinglePageApplicationです.

SinglePageApplication(SPA)とは?

アドレスが変更されると、ページ全体が再ロードされます.<a>で囲まれたHTML、CSS、JavaScriptをクリックするたびに、<a href="">、hrefの対応するアドレスに移動すると、ページ全体がレンダリングされるため、レンダリング速度が遅くなります.
したがって、ユーザインタフェースが、アドレスを移動せずにウェブページ内の共通UI、ウェブページであり、そのページをレンダリングする要素の状態値のみを変更し、他の要素をレンダリングするようにコードを実装する場合、アドレスを変更することなくSPAを実装することができる.

親エレメントが子エレメントに値を渡すには、子エレメントのpropsに値を入れるだけです。

<컴포넌트이름 title={_title} desc={_desc} />

そして.

サブ構成部品は、イベントハンドラ(イベント関数)を使用して親構成部品に値を渡します。

// 하위 컴포넌트 안
class 하위컴포넌트 extends React.Component{
  	render(){
      	return{
          <a href="#" 
          data-mode='create'
          onClick={function(e){
            	e.preventDefault();
            	this.props.onChangePage(e.target.dataset.id);
          }.bind(this)}
  	>Create</a>

          <a href="#" 
          onClick={function(e){
            	e.preventDefault();
            	this.props.onChangePage('update');
          }.bind(this)}
  	>Update</a>
	}
    }
}

export default 하위컴포넌트


/// 상위 컴포넌트 안
class 상위 컴포넌트 extends React.Component{
  	constructor(props){
      	super(props);
        this.state = {
          	mode: 'read'
        }
    }
      
  	render(){
 		return{
          	<하위컴포넌트 onChangePage={function(_mode){
                	this.setState({
                    		mode: _mode
                    })
                }.bind(this)}>
	}
    }
}
export default 상위컴포넌트