[ React ] JSX 문법

정인성·2022년 5월 21일
0

React

목록 보기
1/3
post-thumbnail

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으로 표현
profile
2022.05.09 START

0개의 댓글