<1-6까지 강의에서 진행한 내용 정리>
여기까지 like-button.html 내용을 화면에 띄우면
like 버튼을 눌렀을 때,
널 좋아해
Really really really really
내 맘을 받아줘 oh wah
<html>
<head>
<meta charset="UTF-8"/>
<title>라이크</title>
</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>
<!-- development 개발용 -->
<!-- production 배포용 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
<script>
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {liked: false};
}
render() {
if (this.state.liked) {
return '널 좋아해~ 릴리릴리릴리~~~';
}
return e('button', {onClick: () => this.setState({liked: true})}, 'Like');
}
}
</script>
<script>
ReactDOM.createRoot(document.querySelector('#root')).render(e(LikeButton));
</script>
</body>
</html>
=> 여기서 결과를 길게 적은 이유는
줄 바꿈도 하고 싶어서다.
render() {
if (this.state.liked) {
<>
<p style="white-space: pre-wrap;">
널 좋아해
Really really really really
내 맘을 받아줘 oh wah </p>
</>
}근데 이렇게 하면 줄 바꿈 된다는데
줄 바꿈이 안돼!!!!!!(물론 제로초 선생님 말고 그냥 내가 구글링 해서..ㅜㅜ)
미래의 나야 공부 열심히 해서 이거 해결해보자.
'끄적끄적' 카테고리의 다른 글
| [React] 제로초님 리액트 기본강좌 2-1 정리 Class 와 React hooks의 차이 (0) | 2022.07.02 |
|---|---|
| [React] 제로초님 리액트 기본강좌 1-11까지 정리 (0) | 2022.07.02 |
| 오늘의 일본어 : 당신의 강점은 당신의 약점에서 만들어진다. (0) | 2022.06.30 |
| 오늘의 일본어 : 하고 싶은 일을 찾는 방법 (0) | 2022.06.28 |
| [React] props 와 state의 차이 (0) | 2022.06.27 |
댓글