[React]JSX

JSX란?

 

원래 스타일 주기 위해서 class 명 넣을때

class =" " 보통 이렇게 했었는데

App.js 에서 쓸때에는 className=" " 이렇게 쓰고 있다

 

왜냐면 이게 html이 아니라 JSX 라고 부르는 언어이기 때문!

원래 <div> 하나를 리액트에서 쓰려고 하면

React.createElement('div', null)

막 이런식으로 어렵게 써야하는데 

이러는 대신 JSX 라는 언어를 사용하는 것임!(html 이랑 사용 방식은 비슷함)

 

---

JSX 문법

JSX 문법 중요한거 세개 배웠다

 

class 넣을 땐 className쓰기

아래는 예시

function App() {
  return (
    <div className="App">
      <div className ="black-nav">
        <h4>블로그</h4>
      </div>
    </div>
  );
}

.black-nav{
  display: flex;
  background: black;
  width: 100%;
  color: white;
  padding-left: 20px;
}

변수 넣을 때에는 { }  쓰기! -> 데이터 바인딩

아래는 예시

function App() {

  let post = '강남 우동 맛집';

  return (
    <div className="App">
      <div className ="black-nav">
        <h4>블로그</h4>
      </div>
      <h4>{post}</h4>
    </div>
  );
}

style 넣을 때에는 style={{ 스타일명 : '값' }}

        <h4 style={{color : 'red', fontSize : '16px'}}>블로그</h4>