이전 포스팅에 이어서 간단한
간단 예제를 만들겠습니다.
기존 DOM 방식을 사용하여
1. 버튼을 하나만들고,
2. 버튼이 클릭될때마다
3. Login , LogOut 으로 바뀌는
코드를 작성해보겠습니다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
const root = document.querySelector('#root')
const button = document.createElement('button')
button.addEventListener('click', (e) => {
if (e.target.innerHTML === 'Login') {
e.target.innerHTML = 'Logout'
} else {
e.target.innerHTML = 'Login'
}
})
button.innerHTML = 'Login'
root.append(button)
</script>
</body>
</html>
간단하게 div 하나를 만들어준 뒤에 ,
document.querySelector()를 사용하여 해당 엘리먼트를 선택 하였고
document.createElement('button')을 이용하여 버튼을 생성하였습니다!
버튼을 클릭하면 이벤트가 발생되며 , e.target.innerHTML에 따라서 Login / LogOut으로 바뀌는 로직입니다.
위의 DOM 형식을 -> React로 만들어 보겠습니다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<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/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class LoginBtn extends React.Component {
constructor(props) {
super(props)
this.state = {
isLogin: false,
}
}
render() {
return (
<button
onClick={() => {
this.setState({ isLogin: !this.state.isLogin })
}}
>
{this.state.isLogin ? 'Logout' : 'Login'}
</button>
)
}
}
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<LoginBtn />)
</script>
</body>
</html>
코드 해석을 해드리면
1. React를 사용하기 위해서 script CDN 3개를 불러왔습니다
1-1) React CDN
1-2) ReactDOM CDN
1-3) Babel CDN
SPA를 구현하기위해 <div id="root"></div>를 하나 두었고 ,
JSX 형식을 사용하기위해 script type 을 "text/babel" 로 설정하였습니다.
const root = ReactDOM.createRoot(document.querySelector('#root'))
-> ReactDOM 으로 가상의 DOM을 설정합니다 ( 최초로 조작하는 DOM을 설정하는거라 생각하시면 됩니다)
그리고 root.render(<LoginBtn />) 이 실행되는데 앞에 포스팅에서 말했다 싶이 ,
JSX문법으로 표현하였습니다.
class LoginBtn은 React.Component를 상속받았습니다!
그리고 랜더가 될경우( render() )
return값으로
<button onClick={()=>{this.setState({isLogin: !this.state.isLogin})}}> {this.state.isLogin ? 'LogOut' : 'Login' }</button>
을 반환합니다
JSX 문법을 사용하였고 , this.setState({isLogin: !this.state.isLogin}) 을 통해 onClick 진행시 , 상태를 true / false로 바꿔줍니다!
<button></button> 사이의 { } 값은 Javascript 문법을 사용하기위해 { }로 표현하였습니다.
오늘은 간단예제를 하나 들어보았습니다.
다음포스팅에는 댓글을 만드는 예제를 한번 진행해보겠습니다!
'React' 카테고리의 다른 글
| [React] Webpack에대해.. (0) | 2023.03.02 |
|---|---|
| [React] Babel에 대해서 (0) | 2023.02.27 |
| [React] 공식문서의 주요개념 간단한 설명 (1) | 2023.02.23 |
| [React] React를 통한 간단 댓글구현 (0) | 2023.02.22 |
| [React] React 란? 사용방법 소개 (1) (1) | 2023.02.21 |
