<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@18/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>-->
<script type="text/babel">
'use strict';
class LikeButton extends React.Component {
constructor(props) {
super(props);
// 리액트에서는 데이터 중심으로 생각해야한다.
// 화면에서 달라질 부분을 state로 만들어야한다.
// 눌렀냐 안눌렀냐를 boolean 자료형으로 표현해줌.
this.state = {liked: false};
}
// render의 리턴부분이 화면을 그리는 곳이다.
// 우리는 화면에 나올 모든 부분을 리턴에다가 적어주면 되고 조건에 따라 화면을 보여주고 싶다면
// if문을 쓰면된다. HTML이지만 컨트롤을 자바스크립트가 하는셈이다.
render() {
// this.state.liked가 true면 텍스트를 보여준다.
if (this.state.liked) {
return 'You liked this.';
}
// this.state.liked가 true가 아니면 버튼을 보여준다.
return (
// 눌렀을때 liked 라는 state를 true로 바꿔줌
// setState를 쓰면 state를 변경할 수 있음!
<button onClick={() =>
this.setState({liked: true})
}>
Like
</button>
);
}
}
</script>
<script type="text/babel">
ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>);
</script>
</body>
</html>클래스 컴포넌트 설명
render의 return 부분
화면을 그리는 부분이다.
실제로 보면 Like 버튼아니면 'You liked this.'라는 텍스트가 화면에 보인다. 즉, return 부분에 있는게 화면에 나오는것이다.
그러니까 우리는 화면에 나올 모든것들을 return 에다가 적어주면 되고,
위 코드처럼 조건에 따라 화면을 보여주고 싶다면 if문과 같이 써서 화면에 나올 태그들을 싹 다 적어주면 된다.
html이지만 컨트롤을 자바스크립트가 하는셈이다.
그리고 리액트는 데이터를 중심으로 생각해야한다. 즉, 화면에서 달라질 부분을 state로 만들어야 한다.
위 코드를 실행시키서 화면에서 달라지는 부분을 확인해보면 버튼이 텍스트로 바뀔것이다.
그래서 UI(버튼과 텍스트)를 나타내는 상태를 liked 라는 state로 만들었다.
위 코드에서 버튼을 누르면 텍스트로 바뀌는것이기 때문에 boolean 자료형을 이용해 상태를 표현했다.
그래서 liked가 true가 되면 텍스트를 보여주고 liked가 false가 되면 버튼을 보여준다.
버튼 눌렀을때 state를 false -> true로 변경하려면 버튼에 onClick 속성을 부여해 state를 변경
여기서 주의해야할게 this.setState를 사용해 state를 변경해야한다. 그래야 화면을 재렌더링을 해준다.
실제로 버튼을 클릭하면 state가 true가 된다. 그리고 리액트는 state(데이터)가 true가 됨과 동시에 화면을 바꿔준다.
그래서 우리는 화면에서 자주 달라지는 부분을 state로 만들어놔야하고 state에 따라서 화면을 그려줘야한다.
만약 this.setState를 사용하지않고 this.state.liked = true; 와 같이 변경한다면 state가 변경되지 않는다.
리액트 데브툴
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
React Developer Tools
Adds React debugging tools to the Chrome Developer Tools. Created from revision 28ce1c171 on 3/22/2023.
chrome.google.com
리액트 데브툴을 쓰면 state(데이터)가 바뀌면 화면이 바뀌는것을 한 눈에 볼 수 있다.
'Front end > React' 카테고리의 다른 글
| 함수 컴포넌트 (0) | 2023.04.12 |
|---|---|
| 가독성을 위한 JSX (0) | 2023.04.08 |
| 첫 리액트 컴포넌트(아직은 Class) (0) | 2023.04.08 |
| 리액트 array, object state 변경하는 법 (0) | 2023.04.06 |
| 리액트 useState (2) (0) | 2023.04.06 |
