728x90
반응형
React는 간단한 코드로 ui를 interactive하게 만들어준다.
버튼을 클릭한 횟수를 html 파일에 띄어주는 프로그램을 만들어볼 것이다.
바닐라 js로 코드를 짜면
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html>
<body>
<span> Total clicks:0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById("btn");
const span = document.querySelector("span");
function handleClick() {
counter = counter + 1;
console.log(counter);
span.innerText = `Total clicks : ${counter}`;
}
button.addEventListener("click", handleClick);
</script>
</html>
|
cs |
++) 내부에 text를 바꾸고 싶으면 innerText 속성을 이용할것 !
React로 코드를 짜보겠다.
우선은 react (어플리케이션이 interactive 하도록 만들어주는 라이브러리)와
react-dom(라이브러리/패키지, HTML body에 둘수 있게 해줌)을 import해야한다.
리액트의 규칙은 html 파일에서 작업하지 않는 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script>
const root = document.getElementById("root");
const span = React.createElement("span",
{ id: "cool - span", style: { color: "red" } }, "HELLO I'M A SPAN");
ReactDOM.render(span, root);
</script>
</html>
|
cs |
React.createElement("span"); 에서 괄호안의 "span" 같이 괄호 안의 것은 html 앨리먼트와 이름이 같아야 한다!
첫번째 인자에는 유효한 html태그가 와야하고, 두번째 앨리먼트에는 property를 적는데 property는 class name이 될 수도 있고 id가 될 수도 있다.
ReactDOM.render()를 하면 사용자에게 보여준다는 의미이다. render의 의미는 React element를 가지고 HTML로 만들어 배치한다는 뜻이다. ReactDOM.render(어떤 앨리먼트를, 어떤 위치에) 꼴로 쓴다.
바닐라 js에서는 HTML 만들고 ->Js에 가져와서 ->HTML 수정
React에서는 JS부터 시작 -> 그다음에 HTML이 됨. (React에서 element 업데이트 /생성)
728x90
반응형
'React' 카테고리의 다른 글
| [React]local Storage를 통한 데이터 유지 (0) | 2022.04.01 |
|---|---|
| [React] Event (0) | 2022.04.01 |
| [React] 폼 검증하기 (0) | 2022.04.01 |
| [React] 폼 다루기 (0) | 2022.03.23 |
| [React] useState 초기값에 배열을 넣기! (0) | 2022.03.22 |
댓글