this.state = { a : x, b : y, ...}
=> state값들 선언 및 값 설정
this.setState({ a : z })
=> state값 변경, a state값을 z로 변경, state가 변경될때마다 렌더링 발생
babel
=> jsx문법 지원, 브라우저 호환 지원
1. html로 Like버튼 구현
<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"></div>
<script>
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {
// state 선언
liked: false,
};
}
render() {
return e(
"button",
{
onClick: () => {
this.setState({ liked: true }); // state값 변경
},
type: "submit",
},
this.state.liked === true ? "Liked" : "Like"
);
}
}
</script>
<script>
ReactDOM.render(e(LikeButton), document.querySelector("#root"));
</script>
</body>
</html>
2. jsx class로 like버튼 구현
<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>
<!-- babel은 jsx문법, 브라우저 호환을 지원 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<!-- babel을 script에서 사용 -->
<script type="text/babel">
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {
// state 선언
liked: false,
};
}
render() {
return (
// tag를 직접 넣어줌
<button
type="submit"
onClick={() => {
this.setState({ liked: true });
}}
>
{this.state.liked === true ? "Liked" : "Like"}
</button>
);
}
// JSX ( JS + XML )
}
</script>
<script type="text/babel">
ReactDOM.render(<LikeButton />, document.querySelector("#root"));
</script>
</body>
</html>
해당 게시글은 www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn&index=1&ab_channel=ZeroChoTV 의 강의내용을 기반으로 공부한 내용을 정리한 글입니다.
'React' 카테고리의 다른 글
| [React] 웹팩(webpack) (0) | 2020.11.05 |
|---|---|
| [React] Hooks, 코드 비교 (0) | 2020.11.05 |
| [React] 구구단, <React.Fragment>, e.preventDefault, prevState, (0) | 2020.11.04 |
| [React] html에서 react Component 생성 (0) | 2020.11.03 |
| [React] 리액트란? (0) | 2020.11.03 |