노마드코더 ReactJS로 영화 웹 서비스 만들기를 수강하면서 내용을 정리한 글입니다.
#2.5~ #2.6
2. THE BASICS OF REACT
JSX
JSX : JS를 확장한 문법
- html 작성하는 것과 매우 유사해서, JSX로 React 요소를 만드는게 개발자들 입장에서는 굉장히 편함.
<script>
const root = document.getElementById("root");
// jsx를 이용해서 createElement 대체함
const Title = (
<h3 id="title" onMouseEnter={() => console.log("h3 touched")}>
Hello, I'm a title!
</h3>
);
const Button = (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("I'm clicked")}
>
Click me
</button>
);
const container = React.createElement("div", null, [h3, btn]);
ReactDOM.render(container, root);
</script>Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
// jsx를 이용해서 createElement 대체하기
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("h3 touched")}>
Hello, I'm a title!
</h3>
);
}
// 위의 Title함수랑 밑의 Button함수는 똑같으나 코드형식만 다름
// finction이랑 return문을 이미 포함하고 있는거임
const Button = () => (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("I'm clicked")}
>
Click me
</button>
);
//컴포넌트의 첫 글자는 반드시 대문자
//소문자로 작성하면 react랑 JSX는 HTML button태그라고 생각함
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
- JSX로 작성한 것들을 함수에 담아 컴포넌트로 만듬.
- 컴포넌트의 첫 글자는 반드시 대문자로 작성해야함.
Frontend Developer