html
처럼 생겼지만, 사실은 javascript
이다.-> babel
이라는 도구를 사용해서 xml
형태의 코드가 javascript
로 변환된다.
1. 태그는 열었으면 꼭 닫혀 있어야함.
-> Self closing tag : <input/>
2. 두개 이상의 태그는 꼭 하나의 태그로 감싸져 있어야함.
-> 감싸기 애매한 상황 (의미 없는 태그로 인해 스타일 꼬임 등등..) : 프래그먼트(<> </>) 사용.
(브라우저 상에서는 태그 안보임)
<>
<Hello />
<div>bye</div>
</>
3. JSX
내부에서 javascrip
t 값 사용 방법.
-> { }
로 감싸기.
4. react
, jsx
에서 style
과 className
을 설정 방법.
Style
-
사용 대신, backgroundColor
처럼 카멜표기법
으로 표기function App(){
const name ='react';
const style = {
backgroundColor : 'black',
color: aqua,
};
};
return(
<>
<Hello/>
<div style = {style}>{name}</div>
</>
)
className
html
에서는 class=" "
으로 하지만, reactjs
에선 className=" "
으로 사용.