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

JSX

JSX란

JS안에서 Html을 쉽게 작성할 수 있게 도와주는 JS부가기능 혹은 언어 

 

JSX를 쓰는 이유는

React에서 <div>를 만들려면 React.createElement('div', null, 'Hello World')로 길게 써야함

하지만 JSX를 사용하면 쉽고 편하게 <div>/<div>로 쓰면 됨

 

JSX 문법 3개

JSX 문법1. class 넣을 땐 className

Html처럼 코드를 작성하고 있지만 Html 코드를 작성하는 것이 아닌 JSX를 작성하고 있기 때문

Html공간이 아닌 JS공간에 코드를 작성하고 있어 class을 쓰면 class를 선언해달라는 문법이랑 겹치기 때문에 className이라고 써야함

 

• 온갖 곳에 { } 중괄호를 열어서 변수들을 집어넣을 수 있음
• href, id, className, src 등 여러가지 html 속성들에도 가능함
• 참고로 변수에 있던걸 html에 꽂아넣는 작업을 데이터바인딩이라고 함

 

JSX 문법 2. 변수를 html에 꽂아넣을 때는 {중괄호}

 

function App() {
  let post = "배고파";

  return (
    <div className="App">
      <div className="black-nav">
        <h4>교육중</h4>
      </div>
      <h4>{post}</h4>	{/* <h4>배고파</h4> */}
    </div>
  );
}

 

function App(){

  var data = 'red';
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div className={data}>안녕하세요</div>	{/* <div className="red"> */}
      </div>
    </div>
  )
}

 

JSX 문법 3. style 넣을 땐 style={{스타일명: '값}}

JSX 상에서는 style={ } 안에 { } 자료형으로 집어넣어야 함

{ }대괄호로 한번 더 감싸는 이유는 안에 오브젝트 자료형으로 넣어야 하기 때문

 

• { 속성명 : '속성값' }
• font-size 처럼 속성명에 대쉬기호를 쓸 수 없음
  • 대쉬기호 대신 모든 단어를 붙여써야합니다. 붙여쓸 땐 앞글자를 대문자로 치환해야함(카멜 케이스)

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