[React기초] Nomad Coders 영화 웹 서비스 만들기 #1
📑 Nomad Coders ‘ReactJS로 영화 웹 서비스 만들기’ 강의를 듣고 정리한 내용입니다.
일반적인 vanilla JS로 작업해온 방식
!<!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 handleCilck() {
counter = counter + 1;
span.innerText = `Total Clicks : ${counter}`;
}
button.addEventListener("click", handleCilck);
</script>
</html>
React와 React-dom을 이용한 방식
<!DOCTYPE html>
<html>
<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 h3 = React.createElement(
"h3",
{ onMouseEnter: () => console.log("mouse enter") },
"Hello I'm a span"
);
const btn = React.createElement(
"button",
{
onClick: () => console.log("i am clicked"),
style: {
backgroundColor: "tomato",
},
},
"Click me"
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>
</html>
body 에 id가 root인 div 를 만들고, createElement 를 사용해서 요소들을 만든다.
vanilla JS 에서는 addEventListener 를 사용해서 만들었던 동작들을 createElement 안에 한꺼번에 만들 수 있다.
JSX로 만들기
<!DOCTYPE html>
<html>
<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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
}
const Btn = () => (
<button
style=
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
const Container = () => (
<div>
<Title />
<Btn />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
createElement 를 사용하는 것에 비해 코드를 이해하기에 훨씬 쉽다.babel 을 이용해서 JSX 로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔줬다.JSX 방법으로 만들어주기 위해 Title과 Btn을 함수 형태로 만들어줬다.
이 때, 주의할 점은 함수명을 대문자로 시작해서 일반적인 태그와 구분할 수 있도록 만들어줘야 한다는 점이다.
Leave a comment