JSX는 리액트에서 생김새를 정의할 때, 사용하는 문법입니다. HTML 같이 생겼지만 실제로는 JavaScript를 확장한 문법입니다.
1. 사용자 정의 컴포넌트는 대문자로 시작해야 합니다.
// Hello.js
import React from 'react';
// hello가 아니라 Hello로 표기
function Hello() {
return (
<div>안녕하세요</div>
);
}
export default Hello;
2. 모든 태그는 꼭 닫혀있어야 합니다.
// App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
<br />
<Hello />
</div>
);
}
export default App;
3. 두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 합니다.
감싸는 태그가 애매할 때는 리액트의 Fragment를 사용하면 됩니다.
// App.js
import React from 'react';
import Hello from './Hello';
function App() {
return (
<> // Fragment
<Hello />
<br />
<Hello />
</>
);
}
export default App;
4. JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 { }로 감싸서 보여줍니다.
// App.js
import React from 'react';
import Hello from './Hello';
function App() {
const name = 'react';
return (
<>
<Hello />
<div>{name}</div>
</>
);
}
export default App;
5. JSX에서 태그에 style 과 CSS class를 설정하는 방법
우선, 인라인 스타일은 객체 형태로 작성을 해야 하며, background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍 해주어야 합니다.
// App.js
import React from 'react';
import Hello from './Hello';
function App() {
const name = 'react';
const style = {
backgroundColor: 'black',
color: 'aqua',
fontSize: 24, // 기본 단위 px
padding: '1rem' // 다른 단위 사용 시 문자열로 설정
}
return (
<>
<Hello />
<div style={style}>{name}</div>
</>
);
}
export default App;
6. CSS class를 설정할 때에는 className=으로 설정을 해주어야 합니다.
// App.css
.gray-box {
background: gray;
width: 64px;
height: 64px;
}
// App.js
import React from 'react';
import Hello from './Hello';
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> // className 사용
</>
);
}
export default App;
7. 모든 주석은 { }로 감싸 져야 합니다.
import React from 'react';
import Hello from './Hello';
function App() {
return (
<>
{/* 주석은 화면에 보이지 않습니다 */}
<Hello
// 주석은 이렇게
/>
</>
);
}
'웹개발 > React' 카테고리의 다른 글
[React] useState - 컴포넌트 바뀌는 값 관리하기 (0) | 2021.07.16 |
---|---|
[React] props.isSpecial (isSpecial) 조건부 렌더링 (0) | 2021.07.16 |
[React] props를 사용해서 컴포넌트에 값 전달하기 (0) | 2021.07.16 |
[React] Mac에서 새 리액트 프로젝트 만들기 (0) | 2021.07.16 |
React 작업환경 준비하기 (Node.js / Yarn) (0) | 2021.07.16 |