[Nomad Coders] React_JSX

JSX

• JSX – 자바스크립트를 확장한 문법

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">

• property를 HTML 태그의 속성처럼 적으면 됨-> JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔줌
  바벨을 가져온 뒤 script type="text/babel"로 적어줘야 인식함

<script>
//style은 중괄호 두 개
const Title = (
	<h3 
            id="title" 
            style={{ backgroundColor: "tomato" }}
            onMOuseEnter={() => console.log("mouse enter")}>
                Hello I'm a span
    	</h3>
);

//함수 사용
Title = () => (
        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        	Hello I'm a span
        </h3>
);
</script>

//Title, Button을 렌더링하는 코드
<script>

//jsx 사용 전
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(Container, root);

//jsx 사용 후
const Container = (
	<div>
		<Title /> // title을 복붙해오는 것과 동일
        	<Button />
    	</div>
);
ReactDOM.render(<Container />, root);
</script>

• 컴포넌트의 첫 번째 문자는 반드시 대문자여야함
• 컴포넌트를 사용하려면 함수 형태로 바꾸어주어야 함