개발노트

1. (1)react component 본문

React/basic

1. (1)react component

aloha2jh 2020. 7. 13. 21:44

 

<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>study</title>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> 
    </head>
    <body>
        <div id="root"></div>
        <script>
            const makeTag = React.createElement; //1. 태그를만든다

            class LikeButton extends React.Component{ //2. 컴포넌트
                constructor(props){
                    super(props);
                } 
                render(){ 
                    return makeTag( 'button', null, 'Like' ); 
                    // <button>Like</button> 이런태그를 만들겠다(만드는거아님)
                } 
            }
        </script>

        <script> //3. ReactDom이란애가 화면에다가 실제로 반영(렌더링)해주는 놈
        
            ReactDOM.render( makeTag( LikeButton ), document.querySelector('#root') );  
            //makeTag( LikeButton ) likebutton을 실제로 돔에다가 붙이겠다
            // 어디에? root에
            
        </script>
    </body>
</html>

1. makeTag라는 변수에  , React야 엘리먼트 만들어줘 해서 담음.

 

2. 클래스 컴포넌트를 만든다.

-React.Component가 부모고 그걸 확장(extends)해서 부모 기능을 쓸수있게 하였음.

-props를 인자로 받는 생성자에서 super로 부모 생성자를 호출하는이유는

부모클래스를 실행시켜주어야 되서 그런건가? 찾아봐야 겠다

 

 2-1) 렌더 메서드 안에 이런 태그를 만들겠다라고 써줌 

 

3. ReactDOM을 이용해 render(화면에그리겠다)해줘 위의LikeButton 클래스컴포넌트가 렌더링된다.

 

 

 

 

'React > basic' 카테고리의 다른 글

3. (2)babel  (0) 2020.07.15
3. (1)webpack  (0) 2020.07.14
2. Hooks  (0) 2020.07.14
1. (3) 구구단게임  (0) 2020.07.14
1. (2)HTML속성, 상태(State), JSX  (0) 2020.07.13
'React/basic' Related Articles more