JSX Coding 문법
function App() {
return (
<div className="App">
</div>
);
}
export default App;
- 일반적인 HTML과 동일하게 생각하면 되지만
- 문법에 return 이 들어가며 소괄호 ()포함 되어있다
JSX 알아보기 / navbar UI 만들기
- class 의 jsx 문법은 className으로 선언한다.
- 일종의 자바스크립트 이기에 먼저 선언된 class 문법은 예약이 되어있기에 className으로 사용한다.
/* import './App.css' 경로이다. */
body {
font-family: 'nanumsquare';;
}
.black-nav {
background: black;
width: 100%;
display: flex;
color: white;
padding: 20px;
font-weight: 600;
font-style: 20px;
}
- 상단 메뉴를 만들기 위한 css 수정
- React , Anguler , Vue 와 같은 사용하는 이유중에 하나가 데이터바인딩이다
JSX에서 데이터 바인디 방법
/* 선언하는 방법들 */
let posts = '여긴 어때 여긴 누구';
function param(){
return 100
}
/* 사용 방법들 */
<img src={posts} />
<h3>{param}</h3>
<className ={posts} />
// 중괄호를 사용할경우 모든곳에 변수값 적용이 가능해진다.
- document.getElementId(x) 이런식의 사용은 전통방식이지만 react에는 사용x
- 변수 선언후 중괄호에 변수를 넣을 경우 데이터 바인딩이 가능해진다.
- function에서도 사용 가능 하다
- 중괄호 사용시 어떤 곳이던 사용이 가능하다. 데이터 바인딩이 무지 쉽다
Style 속성에는 object자료형으로 적용되어야 한다.
style = 'font-size = 20px' /* 사용 불가 */
style={ {color : 'blue',fontSize: '30ox'}} /* object 타입형식으로 적용 */
- style=”font-size” 자바스크립트에서 일반적으로 사용하는 style은 사용할수 없다.
- font-size > camelCase작명관습에 따라 fontSize 대문자로 변경후 사용이 가능하다.
