2.6 JSX part Two
2022. 9. 5. 14:46ㆍReact/ReactJS로 영화 웹 서비스 만들기
오늘은 아래의 코드를 또 다른 방식으로 작성해보자.
const container = React.createElement("div", null, [Title, Button]);
그래서 다음과 같이 하면되는것이다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin 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");
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a h3
</h3>
)
}
const Button = () => (
<button
style={{backgroundColor: "tomato"}}
onClick={() => console.log("I am clicked!")}
>
Click me
</button>
);
const Container = (
<div>
<Title />
<Button />
</div>
)
ReactDOM.render(Container, root);
</script>
</html>
Title과 Button을 함수화 시켜주고, Container로 간단하게 불러오면 되는것이다.
이때 불러오는 것들은 무조건 첫번째 글자는 반드시 대문자이어야한다!
그럼 아래의 부분도 바꿔줄 수 있다.
ReactDOM.render(<Container />, root);그런데 다음과 같이 에러가 나는 것을 확인할 수 있다.
왜냐하면 함수로 만들어주지않았기에! 그래서 다음과 같이 변경해보자!
그럼 다음과 같이 정상적으로 출력됨을 확인할 수 있다.
이렇게 코드를 구성하면 개발자들이 보기에도 작성하기에도 편함을 인지할 수있다.
'React > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
| 3.1 setState part One (0) | 2022.09.07 |
|---|---|
| 3.0 Understanding State (0) | 2022.09.06 |
| 2.5 JSX (0) | 2022.09.05 |
| 2.3 Events in React (0) | 2022.09.02 |
| 2.2 Our First React Element (0) | 2022.09.02 |