JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법
얼핏보기에는 HTML처럼 생겼지만 JavaScript다.
babel이라는 도구를 사용해서 xml형태의 코드가 JavaScript로 변환이 되는것
JSX가 JavaScript로 제대로 변환이 되려면 지켜주어야하는 몇가지 규칙이 있다.
태그는 꼭 닫기 (br
과 같은 빈태그도 <br />
로 셀프클로징을 해주어야함)
두 개 이상의 태그는 무조건 하나의 태그로 감싸기
(Fragment <></>
브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않음)
JSX 내부에 자바스크립트 {변수}
로 감싸기
JSX 에서 style 과 CSS class 인라인 스타일은 객체 형태로 작성 & camelCase 형태로 네이밍
ex) backgroundColor
class는 className=
으로 설정
JSX 내부의 주석
{/* 이런 형태로 */}
열리는 태그 내부에서는 //
이런 형태로도 가능
import React from 'react';
import React from './Hello.js';
import './App.css';
function App() {
const name = 'react';
const style = {
backgroundColor: 'black',
color: 'aqua',
fontSize: 24, //기본 단위PX
padding: '1rem' // 다른 단위 사용 시 문자열로 설정
}
return (
<>
{/* 주석입니다.*/}
<Hello
// 주석입니다.
/>
<div style={style}>{name}</div>
<div className="gray-box"></div>
</>
);
}
export default App;
이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C