<바닐라 자바스크립트로 React 구현하기>
1. React CDN
바닐라 자바스크립트로 리액트를 사용하기 위해서는 CDN 링크가 필요하다.
<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>
출처 : https://ko.legacy.reactjs.org/docs/cdn-links.html
CDN 링크 – React
A JavaScript library for building user interfaces
ko.legacy.reactjs.org
세번째 줄은 바벨(Babel)을 포함하고 있다. 바벨의 역할은 자바스크립트 ES6 문법으로 ES5 문법으로 트랜스파일 해주는 중요한 역할을 한다. 바벨과 웹팩(Webpack)은 리액트에서 중요한 역할을 담당하고 있다. 다음에 한번 포스팅할 예정이다.
2. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리액트 라이브러리</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>
<!-- es6 -> es5 트랜스파일 === babel1 -->
</head>
<body>
<div id="root"></div>
</body>
</html>
3. Javascript
<script type="text/babel">
// type="text/babel" 스트립트의 내용을 babel로 트랜스 파일 하겠다. -->
class LoginBtn extends React.Component {
// class 컴포넌트
// 컴포넌트로 생성할 클래스에 상속
constructor(props){
// 부모 생성자 호출
super(props);
// state 키값을 정해진 이름으로 사용해야한다. (state는 컴포넌트의 상태값이며 바뀌면 리렌더링이 된다.)
this.state = {
isLogin: false;
}
}
// jsx 문법에서 html 영역에 {} 중괄호 사용하면 javascript를 이용할 수 있다.
// HTML 문법과 달리 ReactDOM은 onClick (on 뒤에 대문자를 넣어)
// onClick 이벤트에는 {} 안에 실행식을 넣으면 반환값이 할당되는 것이다. (한번 호출됨)
// onClick (클릭이 될 때마다) 호출해야하니 함수의 값이 들어가야한다.
// state는 이전 내용이 보관되어 있고 다시 리렌더링 할 때 이전 값을 가져와서 할당해준다.
render(){
let a = 1;
return (
<div>
<div>
<button onClick={() => {this.setState({isLogin: !this.state.isLogin})}}>{this.state.isLogin ? "LogOut" : "Login"}</button>
</div>
이건 일반 변수 : {a}
<button onClick={() => {a++; console.log(a)}}>증가</button>
</div>
)
}
}
// createRoot 브라우저 DOM 노드 안에 리액트 컴포넌트들을 보여주도록 하기위해서 root를 만들수 있도록 한다
const root = ReactDOM.createDOM(document.querySelector("#root"));
// 리액트 root의 브라우저 DOM 노드 안에 JSX를 보여지도록 하기위해서 root.render 호출
// root 안에서 LoginBtn 컴포넌트를 보여지도록 하고, 이 안에서 DOM을 조작할 것이다.
root.render(
<LoginBtn />
)
</script>
여기서 주의!
React는 상태(State)가 변해야 리렌더링을 해준다. 위 코드에서 첫번째 Button에서는 onClick 했을 때 setState함수로 state 값을 변경했기 때문에 클릭하면 Login과 Logout이 번갈아 나오는 것을 확인할 수 있다. 그러나 두번째 button에서 onClick에서는 상태값이 변하지는 않고 a라는 변수의 값만 변하기 때문에 console창에서 1씩 증가하는 것을 볼 수 있지만 리렌더링이 되지 않기 때문에 증가하지 않음을 확인할수 있다.
'React' 카테고리의 다른 글
| [React] Link 컴포넌트 (1) | 2024.09.20 |
|---|---|
| [React] class 컴포넌트와 state의 변화 (1) | 2024.08.30 |
| [React] CRA (Create React App) 간단히 알아보기 (0) | 2024.08.30 |
| [React] Webpack과 Babel 에 대해서 (JSX 없이 React 구현) (0) | 2024.08.26 |
| [React] 리액트 첫 시작 (0) | 2024.08.24 |