React
JSX
youngseokim_kr
2021. 11. 20. 17:39
jsx 문법으로 작성된 코드는 순수한 javascript 로 컴파일 하여 사용한다.
그 컴파일을 babel 이 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatoble" content="ie=edge" />
<title>Example</title>
</head>
<body>
<div id="root"></div>
<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">
console.log(React);
console.log(ReactDOM);
ReactDOM.render(
<div>
<div>
<h1>주제</h1>
<ul>
<li>React</li>
<li>Vue</li>
</ul>
</div>
</div>,
document.querySelector("#root")
);
</script>
</body>
</html>babel을 불러와서 이렇게 작성해 줄 수 있다.
jsx를 쓰는이유
React.createElement vs jsx
가독성이 좋다
babel 과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉽다.
JSX 문법
최상이 요소가 하나여야 한다.
최상위 요소를 리턴할 경우 ()로 감싸야한다.
자식들을 바로 랜더링 하고 싶으면, <> 자식들</>를 사용합니다. =>Fragment
최상위에 <> </> 가짜 태그로 감싸서 최상위를 하나로 만들어준다.
자바스크립트 표현식을 사용하려면 {표현식}를 이용한다. =>>>$ xxxx
if문은 사용할 수 없다. ->삼항 연산자 혹은 &&를 사용한다.
style을 이용해 인라인 스타일링이 가능
class 대신 className을 사용해 class를 적용할 수 있다.
자식요소가 있으면, 꼭 닫아야 하고, 자식요소가 없으면 열면서 닫아야 한다.
<p></p>
<br /> 중요!!