4. JSX
- TOC {:toc}
이 글은 벨로퍼트와 함께하는 모던 React중 4. JSX의 기본 규칙 알아보기의 내용을 복습하기위해 핵심 내용을 요약 정리한 글입니다.
- 제가 필요한 부분 위주로 확인하면서 정리하고 있어 글에 덜 작성된 부분이 있을 수 있습니다.
- 글 작성 후 원문의 내용이 수정되거나 내용을 이해하기 위한 개인적인 설명이나 해석이 있을 수 있습니다. 되도록 원문을 참고해주시길 바랍니다.
- 잘못된 부분이 있다면 댓글이나 그 외 편하신 방법으로 알려주시면 감사하겠습니다.
꼭 감싸져야하는 태그
React가 return
하는 JSX에서 두 개 이상의 태그는 무조건 하나의 태그로 감싸져있어야 한다.
하지만 단순히 감싸기 위하여 불필요한 div
를 사용하는 것이 별로 좋지 않은 상황도 있다. 그럴 땐, React의 Fragment
라는 것을 사용한다.
태그를 작성 할 때 이름 없이 작성을 하게 되면 Fragment
가 만들어지는데, Fragment
는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.
function App() {
return (
<>
<Hello />
<div>안녕히계세요</div>
</>
);
}
주석
JSX 내부의 주석은 {/* 이런 형태로 */}
작성한다.
열리는 태그 내부에서는 //
이런 형태로도 주석 작성이 가능하다.
return (
<>
{/* 주석은 화면에 보이지 않습니다 */}
/* 중괄호로 감싸지 않으면 화면에 보입니다 */
<Hello
// 열리는 태그 내부에서는 이렇게 주석을 작성 할 수 있습니다.
/>
</>
);
-
draft