[React ] 1-2. 첫 리액트 컴포넌트

인프런에 제로초님의 강의를 보고 정리한 내용입니다 : )
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

 

강의를 듣는데, 퍼블리싱을 했던 사람들에게는 컴포넌트라는게 이해하기 힘들수있다고 하신걸 들었다.

살짝 걱정되긴하는데,,, 다른것도 많이 했었으니까..!! 

 

 

React를 사용하기 위해서는 head태그안에 아래와같은 코드를 입력해주어야한다.

<script src="https://unpkg.com/react@16/umd/react.development.js"></script> 
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

 

<div id="root"></div> <!-- 결과 : <div id="root"><button>Like></button> </div>-->
        <script>
            const e = React.createElement;
            // class하나가 컴포넌트 하나라고 보자구..
            class LikeButton extends React.Component {
                constructor(props){
                    super(props);
                }

                // render()  :  태그를 만들어주는 함수, 화면을 어떻게 보여줄것인지 
                // (<button>Like></button>를 만들겠다!)
                render(){ 
                    return e('button', null, 'Like'); 
                }
            }
        </script>
        <script> // 위에 #root에 그린다!
            ReactDOM.render(e(LikeButton), document.querySelector('#root'));
        </script>

 

render () 

태그를 만들어 주는 함수, 

화면을 어떻게 보여줄것인지 나타내주는 함수로 위에서는 결국 <button>Like</button>을 만들겠다! 라는 의미를 가지고 있다.

 

ReactDOM

(대소문자 주의)

실제로 화면을 그려주는 역할을 한다. #root위에 그려주겠다 라고 생각해야한다.