JSX의 기본 규칙
1. 꼭 닫혀야 하는 태그
Input
태그 등 기존에 닫지 않아도 되는 태그를 반드시 닫아 주어야함
또는 태그와 태그 사이에 내용이 들어가 않을 때에는 <input />
처럼 닫아 준다.
이를 Self Closing 태그라 한다.
2. 꼭 감싸져야하는 태그
모든 JSX 는 각각의 하나의 태그로 감싸져 있어야합니다. 부모가 하나라는 얘기다.
하지만 단순히 감싸기 위하여 불필요한 <div>
같은 태그로 감싸는게 필요 없을 경우에는
Flagment(빈 태그)라는 것을 사용한다. <> 내용 </>
와 같이 빈 태그로 감싸주면 불필요한 박스를 없앨 수 있다.
3. JSX 안에서 자바스크립트 값 사용하기
JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {}
로 감싸서 표현.
4. CSS의 표현
-
(dash)는 표현 할 수 없다 그렇기 때문에 camelCase 형태로 네이밍 해주어야 한다.
=> x , background-color
backgroundColor
=> o
인라인 스타일로 css를 적용할 경우 객체 형태 로 작성 해야한다.
기본 단위는 px
이며 다른 다위사용시 문자열 로 작성 해야한다.
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;
Author And Source
이 문제에 관하여(JSX의 기본 규칙), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@qor8917/JSX의-기본-규칙저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)