도입
순수 HTML
- 버튼을 클릭하면 숫자가 1씩 증가하는 기능을 만들어보자.
다음과 같은 로직이 필요하다.
- HTML을 생성한다.
- JS에서 HTML 태그를 찾아온다.
- eventListener를 생성한다.
- eventListener에 함수를 등록한다.
위의 로직에 따라 아래와 같은 코드가 생성된다.
<!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>
<span>total click : 0</span>
<button id="btn">Click me</button>
<script>
let counter = 0
const button = document.getElementById('btn')
const span = document.querySelector('span')
function handleClick(){
counter += 1
span.innerHTML = `total Clicks = ${counter}`
}
button.addEventListener('click',handleClick)
</script>
</body>
</html>
위의 코드를 react 스럽게 바꿔보자.
그러려면 react library를 다운받아야 한다.
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
body 태그 밑에 추가해주자.
React
React JS가 HTML을 생성해준다.
하지만 그렇게 하려면 React DOM을 생성해야 한다.
React JS는 Application이 interative 하게 만들어주는 Library이다.
React DOM은 모든 React Element들을 HTML body에 둘 수 있도록 해준다.
- React JS -> Engine
- React DOM -> UI 생성기 / 렌더링
React 동작 방식
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script>
const root = document.getElementById('root')
const span = React.createElement("span")
ReactDOM.render(span,root)
</script>
</html>
span 태그가 생성됐다.
해당 React.createElement에 아래와 같이 추가함으로써 id, style, content를 줄 수 있다.
<script>
const root = document.getElementById('root')
const span = React.createElement("span",{id:"hello",style:{color:"red"}},"hello")
ReactDOM.render(span,root)
</script>Events in React
기존 JS 코드
위와 같이 버튼 클릭을 하면 click 수가 늘어나는 코드가 있다.
위를 react 스럽게 바꿔보자.
좀 더 React 스러운 코드
위와 같이 하나의 컨테이너로 묶어서 같이 렌더링 할 수 있다.
Property로 넘기기
위 코드를 보면 기존엔 addEventLisnter로 event를 생성하던 코드들이 property로 넘어가서 event를 생성한다.
interactive한 app에서 하는 작업을 모두가 event를 감지하는 일이다.
그래서 addEventListner를 하나하나 다는 식으로 event를 생성하는 것이 아니라, 위와 같이 Property로 event를 생성한다는 점이 React에서 멋진점이다.
Recap
현재 React.createElement()를 통해 해당 element들을 생성하고, ReactDOM.render()에 넘겨주는 식으로 ReactDOM을 렌더링 하고 있지만, 앞으로는 이런 방식으로 사용하지 않을 것이다.
JSX
JSX는 Javascript 문법을 확장한 문법이다.
JSX를 사용하면 React.createElement() 를 사용해야 했던 코드들이 HTML 스럽게 바뀌는 것을 볼 수 있다.
JSX는 JS로 바뀌어야 한다. 해당 툴로 Babel을 사용할 수 있다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel;">
... code
</script>
위와 같이 babel standalone을 추가해주자.
아래는 JSX 문법이다.
공식문서를 통해 확인해 볼 수 있다.
JSX - 2)
const container = <div>Title And Button</div>
위와 같이 container에 title과 button을 JSX 문법을 통해 담아보자.
당연히 위와 같이 title과 button을 적으면 단순 text로만 출력된다.
title과 button을 사용해주기 위해 해당 title, button을 함수로 만들어주자.
🔖) arrow function는 아래와 같이 치환될 수 있다.
arrow function에서 () => () 는 return 이 생략돼 있다.
Btn, Title을 함수로 바꿔서 적용하면 아래와 같이 바뀐다.
이 때, 컴포턴트의 앞글자는 대문자여야 한다.
만약 소문자로 선언하면 React랑 JSX는 해당 태그를 HTML의 태그로 인식한다.
컴포넌트별로 분리해서 코드가 보이니 훨씬 깔끔해졌다.
head > script에 가보면, babel이 JSX -> JS로 렌더링을 해준 것을 볼 수 있다.
'WEB Frontend > 📌노마드코더강좌' 카테고리의 다른 글
| ReactJS로 영화 웹 서비스 만들기 #2 - State & Props (0) | 2022.05.10 |
|---|
댓글