React 레이아웃 만들 때 쓰는 JSX문법 3가지

📝 React 레이아웃 만들 때 쓰는 JSX문법 3가지
#230503

JSX란?

js안에서 html 쉽게 작성할 수 있게 도와주는 js 쓸수 있는 부가기능. 언어

JSX 쓰는이유

원래 리액트에서 div 만들 때 아래처럼 만들어야함

React.createElement('div',null,'HelloWorld')

리액트에서 jsx로 사용해서 div 만들면 아래처럼 써도 가능

<div> </div>

❗ 리액트는 App.js가 메인페이지

JSX문법 1. html에 class 넣을 땐 className

JSX문법 2. 변수에 html에 꽂아넣을 때는 {변수명}

원래 js에서 변수 넣을 때는 이렇게 써야함.

document.querySelector('h4').innerHTML = post

리액트는 중괄호 사이에 변수명만 집어넣으면 됨.

function App() {

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

  return (
    <div className="App">
      // 문법1. class (x) className(o)
      <div className="black-nav">
        <h4>블로그</h4>
      </div>
      <h4>{ post }</h4>
      // 문법2. 변수 담을 때는 {변수명}
    </div>
  );
}

💻 변수에 있던걸 html에 꽂아넣는 작업을 데이터바인딩 이라고함.

JSX문법 3. html에 style 속성 넣고싶으면 {{코드}}

jsx에선 style={ } 안에 { } 자료형으로 넣어야함.
- {속성명 : '속성값'}
- 대쉬기호 사용불가 ➡️ 카멜케이스로 사용
ex) font-size(x),     fontSize(o)

// 기존 html 사용코드
<div style="color:blue", font-size:30px; > 글씨 </div>

// jsx 사용 문법코드
<div style="{{ color:'blue', fontSize : '30px'}} > 글씨 </div>