[REACT]JSX 문법

리액트에서는 html이 아니라 JSX라는 문법을 사용합니다!

리액트에서는 <div>하나 만들기 위해서는

자바스크립트로 React.createElement('div', null) 이렇게 사용해야하는데

그러면 복잡하고 어려우므로 JSX를 사용하는겁니다!!

 

오늘은 이 JSX문법을 실제로 어떻게 적용하는지 알아보았습니다.

 

 

🐰 class 넣을땐 className 🐰

 

스타일을 주기 위한 class명을 넣을땐  className을 사용합니다.
class를 쓰면 안되는 이유는

자바스크립트에서 사용하는 예약어인 class라는 키워드를

사용하면 안되기 때문입니다.

function App() {

  return (
    <div className="APP"> <!--이런식으로 className 사용-->
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
  );
}
export default App;

---

🐰 변수를 html에 넣을땐 {} 중괄호 사용 🐰

function App(){

  let post = '우동맛집';//1.변수에 값을 저장
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그</div>
        <div>{post}</div><!--2.원하는곳에 {변수} 입력
        이렇게 하면 여기에 '우동맛집' 저장되있음-->
        <div className={data}>반갑다</div>
        <!--className으로 사용도 가능함 지금 이부분의 className은 우동맛집이 되는것-->
      </div>
    </div>
  )
}

 

먼저 post라는 변수에 문자 저장해놓고

원하는 위치에 {post} 중괄호를 사용하여 위치시켜줍니다!

그러면 화면상 저부분에 변수에 저장하였던 문자 '우동 맛집'이 들어갑니다.

여러곳에 {}중괄호를 열어 변수를 집어넣는게 가능합니다!

href, id, className, src 등 여러가지 html속성들에 가능!

 

이렇듯 변수에 있던걸 html에 넣어주는걸 데이터바인딩이라고 부릅니다!

---

🐰  html에 style속성을 넣고 싶다면? 🐰

 

<div style="color : pink"> 이런걸 넣고 싶으면

JSX 상에서는 style={ } 안에 { } 자료형으로 집어넣어야합니다. 

<div style={ {color : 'pink', fontSize : '28px'} }> 글씨 </div>

 

- {속성명 : '속성값' } 이렇게 넣으면 됩니다!

- ★ 여기서 보이는건 font-size가아닌 fontSize라고 작성되있는것인데.

대쉬기호를 쓸 수 없습니다. 대쉬기호 대신 모든 단어를 붙여써야하고,

붙여쓸 땐 앞글자를 대문자로 써야합니다 (카멜케이스 기법)