JSX 렌더링
우리는 이전까지 화면에 표시하는 방법으로는 ReactDOM.render()함수를 사용했었다.
const title = <h1 className="fancy">제목</h1>위와 같이 리액트 엘리먼트를 생성한다.
ReactDOM.render(title, document.getElementById('root'));그리고 위와 같이 ReactDOM 라이브러리에서 render 함수를 통해 화면에 그릴 수 있었다.
babel
이 JSX에 대한 해석은 babel이라는 친구가 해석해서 처리한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>리액트 예제</title>
</head>
<body>
<div id="root"></div>
<!-- React 라이브러리와 ReactDOM 라이브러리, babel 땡겨오기 -->
<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 crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// JSX 코드를 여기에 넣거나 별도의 자바스크립트 파일에 대한 링크를 script 태그에 넣을 것
</script>
</body>
</html>위와 같이 CDN에 올려진 라이브러리 코드를 가져와 사용할 수도 있다.
리액트 프로그래먼트
리액트에서는 프래그먼트를 사용해 두 형제 컴포넌트를 렌더링해줄 수도 있다.
먼저 루트에 DOM을 렌더링해줄 Cat이라는 새 컴포넌트를 만드는 예제를 살펴본다.
function Cat({ name }) {
return <h1>고양이 이름은 {name} 입니다.</h1>;
}
RectDOM.react(<Cat name="나비" />, document.getElementById("root"));위는 h1 태그 하나를 생성하는 코드이다. 하지만 2개의 태그를 생성하는 코드를 넣는다면?
function Cat({ name }) {
return (
<h1>고양이 이름은 {name} 입니다.</h1>
<p>이 고양이는 귀여워요</p>
);
}
RectDOM.react(<Cat name="나비" />, document.getElementById("root"));위 코드는 "Adjacent JSX elements must be wrapped in an enclosing tag"라고 화를 낸다.
하지만, React의 프래그먼트를 통해 이를 해결할 수 있다.
function Cat({ name }) {
return (
<React.Fragment>
<h1>고양이 이름은 {name} 입니다.</h1>
<p>이 고양이는 귀여워요</p>
</React.Fragment>
);
}
RectDOM.react(<Cat name="나비" />, document.getElementById("root"));이렇게 표현하면 문제없이 실행된다.
function Cat({ name }) {
return (
<>
<h1>고양이 이름은 {name} 입니다.</h1>
<p>이 고양이는 귀여워요</p>
</>
);
}
RectDOM.react(<Cat name="나비" />, document.getElementById("root"));또한, 이 React.Fragment가 귀찮다면 <> 공백 태그로 대체하여 사용할 수 있다.
