반응형
지난 글에서 리액트를 연습하기 위해 환경 구성했었는데요
nodejs 없이 react 문법 연습하기
react로 뭔가 만들어보려면 초기 세팅하는 것들이 많은데요 문법만 기초부터 연습해보려면 nodejs 설치 없이도 할 수 있어요 Visual Studio Code 만 설치되어 있으면 할 수 있습니다 기본 html 에서 react
tolovefeels.tistory.com
그 코드에서 변수와 함수에 대해서 알아봤어요
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>연습</title>
<!-- React, React-DOM 스크립트 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<!-- 1. React 가 보여지는 곳 -->
<div id="root"></div>
</body>
<script>
// React 로 태그 만들기
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props)
}
render() {
return e('button', null, '좋아요')
}
}
</script>
<script>
// React로 만든 태그 렌더링 하기
ReactDOM.render(e(LikeButton), document.querySelector('#root'));
</script>
</html>다른 곳에서 받는 값이 아니라 그 안에서 변하는 값은 state 변수로 관리해야 합니다
그래서 버튼을 눌렀을 때 render 부분의 좋아요 부분이 좋아요 눌림이라고 바꾸고 싶고 변하는 부분이니 state 변수로 관리해야 합니다
constructor 안에 넣거나 constructor 부분을 아예 빼고 밖에 해도 됩니다
class LikeButton extends React.Component {
constructor(props) {
super(props)
this.state = {
liked: false
}
}
render() {
return e('button', null, '좋아요')
}
}LikeButton 클래스만 보면 이렇게 수정 가능합니다
null 부분에 함수를 넣으면 됩니다
return e('button', {onClick:() => {this.setState({ liked:!this.state.liked })}}, this.state.liked ? '좋아요 눌림': "좋아요 누르기")return 부분이 이렇게 바꾸면 좋아요를 눌렀는지에 따라 버튼 이름을 변경 가능하게 됩니다
반응형
'코딩 프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글
| 스크롤바 보이지 않게 하는 CSS, 스크롤바 안 보이게 하는 CSS (0) | 2021.01.28 |
|---|---|
| React JSX 문법 사용해보기 (0) | 2020.11.09 |
| nodejs 없이 react 문법 연습하기 (0) | 2020.11.06 |
| Visual Studio Code 자체 웹서버 html 코드 테스트 (0) | 2020.11.05 |
| Visual Studio Code 에서 React 개발환경에 필요한 확장 프로그램 (0) | 2020.11.04 |
댓글