Vanilla JS
- HTML 작성
- Script 작성
1) HTML 요소 가져오기
2) 이벤트 감지
3) 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++;
span.innerText = `Total clicks: ${counter}`;
}
button.addEventListener("click", handleClick)
</script>
</html>React JS
- module 설치
-react: interactive한 UI를 만들 수 있도록 하는 엔진 같은 역할 -> interactive power
-react-dom: react element들을 HTML body에 둘 수 있도록 함
- 설치가 잘 된 경우, 로그에서React가 출력됨
- element 생성 방식
- JS 내에서 HTML 요소 생성
- React JS가 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");
// Vanilla JS에서 4줄에 걸친 코드가 한 줄로 구현 !
// old way of create element
const h3 = React.createElement("h3", {
onMouseEnter: () => console.log("mouse enter"),
}, "Hello I'm a span");
const btn = React.createElement("button", {onClick: () => console.log('clicked!')}, "Click me");
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>- 실행 결과
JSX
-
JS를 확장한 문법
-
Babel 설치
- JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 코드 변환 작업 필요
- 변환 작업을 하지 않을 경우, 아래와 같이 브라우저가 JSX 코드를 이해하지 못함
-
JSX를 이용한 element 생성 방식
-
JSX를 활용한 코드
<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
// const h3 = React.createElement("h3",
// {
// onMouseEnter: () => console.log("mouse enter"),
// }, "Hello I'm a span");
// 컴포넌트를 함수로 생성
const Title = () => (<h3
id= "title"
onMouseEnter = {() => console.log('mouse enter')}
>
Hello I'm a title
</h3>);
// const btn = React.createElement("button",
// {
// onClick: () => console.log('clicked!'),
// style: {
// backgroundColor: "tomato"
// }
// }, "Click me");
const Button = () => (<button
style={{
backgroundColor: "tomato"
}}
onClick={() => console.log('clicked!')}
>
Click me
</button>);
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container/>, root);
</script>
</html>
junior backend-developer 👶💻