1. class
- 거의 안 쓰이는데 ErrorBoundory에서 사용
class LikeButton extends React.Component{
}button 클릭 시 You liked this 나옴
<html>
<head>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>-->
<script type="text/babel">
'use strict';
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {liked: false}; //state는 화면에서 달라져야하는 부분
}
render() {
if (this.state.liked) {
return 'You liked this.'; //return 화면을 그리는 곳
}
// return React.createElement('button', {onClick() => this.setState({liked:true})}, 'Like');
return (
// 객체를 바꾸지 말고, 복사해라 -> setState을 사용하면 됨
<button onClick={() => this.setState({liked: true})}>
Like
</button>
);
}
}
</script>
<script type="text/babel">
// LikeButton 만든 컴퍼런스를 root 안에 그려라
// ReactDOM.render(<LikeButton/>, document.querySelector('#root')); // react 17버전 코드 -> 17버전도 되긴하지만, 17버전으로 인식해서 실행이 안될 수도 있음
ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>); // react 18버전 코드
</script>
</body>
</html>2. 함수
const LikeButton = () => {};
function LikeButton() {};<html>
<head>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>-->
<script type="text/babel">
'use strict';
function LikeButton(){
const [liked, setLiked] = React.useState(false);
if(liked){
return 'You liked this.';
}
return(
<button onClick={() =>{setLiked(true); }}>Like</button>
);
}
</script>
<script type="text/babel">
ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>);
</script>
</body>
</html>
'리액트' 카테고리의 다른 글
| [React] Elements (1) | 2023.01.05 |
|---|---|
| [React] JSX 알아가기 (2) | 2023.01.05 |
| [React] 리액트 시작하기 (1) | 2023.01.04 |
| [React] 리액트 기초 (1) | 2023.01.04 |
| [React 기초] 구구단 만들기 (6) | 2023.01.02 |