~2.6까지의 강의
JSX는 자바스크립트를 확장한 문법이다.
기본적으로 리액트 요소를 만들 수 있게 해주고, html에서 사용한 문법과 흡사하다.
앞에서 배운 것과 비교해보자.
createElement
const h3 = React.createElement(
"h3",
{
id:"title",
onMouseEnter: ()=> console.log("mouse enter"),
} ,
"Hello, I'm a span"
);
JSX
const Title=(
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
createElement
const btn = React.createElement(
"button",
{
onClick:()=>console.log("i'm clicked"),
style:{
backgroundColor:"tomato",
},
},
"Click me"
);
JSX
const Button=(
<button style={{
backgroundColor:"tomato",
}}
onClick={()=>console.log("i'm clicked")}
>
Click me
</button>
);
전체코드 JSX
JSX가 createElement 사용하는 것 보다 기존에 알던 코드랑 비슷해서 이해하기가 쉽다. (html이랑 별 다른 점이라고 할 게 없는것 같음)
createElement
const container = React.createElement("div", null,[h3,btn]);
ReactDOM.render(container,root);
JSX
const Container =(
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(Container,root);위의 것을 사용하기 위해서 함수를 만든다.
<Title />, <Button />으로 나타내면, 그 자리에 똑같은 게 들어간다. (코드 복붙이랑 똑같음)
주의할 점은 첫 글자는 무조건 대문자로 나타낼 것!
함수로 나타내기 위해서 사용 할 것은
두개는 같은 의미이다. 이때 () => () 는 arrow function이다.
function A(){
return();
}
const A = () => ();
최종
<!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 Button= () =>(
<button style={{
backgroundColor:"tomato",
}}
onClick={()=>console.log("i'm clicked")}
>
Click me
</button>
);
const Container =(
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(Container,root);
</script>
</html>
'Web Service > React' 카테고리의 다른 글
| [Next.js] Vercel 오류 및 Next.js 구조 (0) | 2022.03.19 |
|---|---|
| [영화 웹 서비스 만들기] #4. setState (0) | 2022.03.19 |
| [영화 웹 서비스 만들기] #2. 바닐라JS와 리액트JS의 비교2, 버튼 (0) | 2022.03.14 |
| [영화 웹 서비스 만들기] #1. 바닐라JS와 리액트JS의 비교 (0) | 2022.03.14 |
| [nextjs-blog] #3. Pre-rendering and Data Fetching (0) | 2022.01.11 |
댓글