리엑트 입문 1 - JSX 란??

하현준·2021년 9월 17일
0

react 입문

목록 보기
2/10
post-thumbnail

JSX의 규칙

1. 태그는 항상 닫혀있어야 한다.

<div> x
<br> x
<input> x

<input/> o
<br/> o

2. 꼭 감싸져 있어야 하는 태그

x
<div><div>
<div><div>

o <전체를 감싸는 태그가 있어야함>
<div>
	<div></div>
    <div></div>
</div>

또는 불필요한 태그를 사용하고 싶지 않을 때 빈태그를 사용해(Fragment) 작성

<>
	<div></div>
    <div></div>
</>

3. JSX 값 쓰는 방법

{}를 작성하여 태그안에 값을 작성해줍니다.

<div>{name}</div>

4. style 과 className 작성법

font-size, font-weight 등 과 같이 -로 이루어진 style의 경우 camelCase로 작성해주어야 합니다.
-> fontSize, fontWeight

또한 class명은 className 으로 작성해주어야 합니다.

<div className="title"></div>

5. 주석 달기

JSX에서 주석은 {/* ---- */}로 작성합니다.

참고 자료 https://react.vlpt.us/basic/04-jsx.html

profile
하다보면 안되는 것이 없다고 생각하는 3년차 프론트엔드 개발자입니다.

0개의 댓글