- 리액트(React) 컴포넌트(Component) 생성하기
<html>
<head>
<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">
<!-- Like 버튼 태그가 생성될 공간 -->
</div>
<script>
const e = React.createElement; // html 태그를 만들겠다.
class LikeButton extends React.Component {
constructor(props) { // 컴포넌트가 제일 먼저 실행되는 부분
super(props);
}
render() { // 좋아요 버튼을 화면에 어떻게 표시할 것인지를 결정해주는 메서드
return e('button', null, 'Like'); // 태그를 만들어주는 함수 <button>Like</button> 이런 태그를 만들겠다.
}
}
</script>
<script>
// React로 컴포넌트를 만들겠다. 웹에다 실제로 구현(화면에 반영). 렌더링을 해준다는 개념.
ReactDOM.render(e(LikeButton), document.querySelector('#root'));
</script>
</body>
</html>- 리액트로 Like 버튼 태그 생성하기(결과물)
참고자료 : https://www.inflearn.com/course/web-game-react