1. (2)HTML속성, 상태(State), JSX

HTML 속성을 React로 표현하려면?

기존 HTML

<button onclick="()=>{ console.log('clocked'); }" type="submit"></button>

 

react component로 만들었을때의 button 부분

return makeTag( 'button', null , 'Like' );  

 

HTML 리액트로 바꿀경우 null 자리 안에 속성(attrubute)들이 들어가게 되며

= csv가 : 으로바뀐다

return makeTag( 'button', { onClick: ()=>{ console.log('clocked'); }, type:'submit'  }, 'Like' );  

 

 

 

State

상태는 바뀌는 부분 또는 바뀔수 있는 부분.

 

버튼 클릭시 좋아요를 true로 바꾸려면?

	   <script>
            const makeTag = React.createElement;   
            class LikeButton extends React.Component{  
                constructor(props){
                    super(props);

                    this.state={ //1. state 상태값을 만들기
                        liked : false, //좋아요 안누른 기본값
                    }
                } 
                render(){
                    
                    return makeTag( 'button', { onClick: ()=>{ this.setState({ liked:true }) }, type:'submit'  }, 'Like' );  
                    // 2. 클릭시 this.setState로 liked 속성값을  true로 바꾼다
                } 
            }
        </script> 
        <script>  
            ReactDOM.render( makeTag( LikeButton ), document.querySelector('#root') );    
        </script> 

this.state 를 추가해 liked 속성을 추가해서 기본값을 false로 두고

클릭시 function에 this.setState로 like상태값을 true로 바꾼다

 

true 와 동시에 화면을 바꾸러면 어떻게 해야 할까?

  <script>
            const makeTag = React.createElement;   
            class LikeButton extends React.Component{  
                constructor(props){
                    super(props);

                    this.state={  
                        liked : false,  
                    }
                } 
                render(){ 
                    return makeTag( 
                        'button', 
                        { onClick: ()=>{ this.setState({ liked:true }) }, type:'submit'  }, 
                        this.state.liked == true ? 'Liked' : 'Like' );   
                        //
                } 
            }
        </script> 
        <script>  
            ReactDOM.render( makeTag( LikeButton ), document.querySelector('#root') );    
        </script>

 

위 코드를 바벨을 써서 JSX로 바꿀수 있다 (태그를 씀으로써 가독성 향상)

JS + XML = JSX

      
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
      <script type="text/babel"> 
            class LikeButton extends React.Component{  
                constructor(props){
                    super(props);

                    this.state={  
                        liked : false,  
                    }
                } 
                render(){ 

                    return <button type="submit" onClick={ ()=>{ this.setState({ liked:true }) } }>
                        {this.state.liked == true ? 'Liked' : 'Like'}
                        </button>

//                   return makeTag( 
//                        'button', 
//                        { onClick: ()=>{ this.setState({ liked:true }) }, type:'submit'  }, 
//                        this.state.liked == true ? 'Liked' : 'Like' );   
                } 
            }
        </script> 
        <script type="text/babel">  
            ReactDOM.render( <LikeButton /> , document.querySelector('#root') );    
        </script>

위 코드처럼 쓸수 있는 이유는 바벨이 렌더에 테그가 들어가기 전 코드로 바꿔주기 때문

ReactDom.render에서 컴포넌트만 여러개 입력하면 각 컴포넌트들이 생겨난다 ( Liked도 재각각 동작함 )

<LikeButton/> 

 

재사용성 +++

 

리액트컴포넌트는 대문자로 시작한다는거