1 . 태그는 꼭 닫아주기
<input type="text"> // 안좋은 예 ( 태그 안닫음 )
<input type="text"/> // 좋은 예 ( 태그 닫음 )
2 . 무조건 단1개의 요소를 반환
- JSX에서 리턴할 수 있는 요소는 1개 ( 형제관계도 return X )
- JSX에서 1개보다 많아도 X 없어도 X ( 아무것도 없으면 null 써라 )
3 . JSX에서 js 값을 가져오려면 중괄호를 쓴다
function App() {
let name = "inseong"
return (
<div className="App">
{name} // js 변수 값을 가져올려면 {}
</div>
);
}
4. JSX 속성값을 ClassName
- class 대신 className으로 정의 한다
- 실제 DOM에서는 class로 보인다
5. 태그에서 스타일 사용 방법
<p style={{ textAlign: 'left' }}>이름을 입력해주세요.</p>
- 중괄호를 {{}} 2번 사용해야한다
ex ) margin-top --> marginTop으로 표현