리액트 - JSX 문법

리액트에서 레이아웃을 만들때 html과 다른 문법

JSX - JavaScript Xml의 줄임말로 쉽게 말해 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있다.

JSX문법

1. 부모요소 하나만을 return한다.

function App(){
  return (
    <div className="App">
      안녕하세요~~
    </div>
  )
}

위의 코드와 같이 요소 하나만 return해야한다.

2. className

html 태그에 class를 부여할 때 class="클래스명" 이 아닌 className="클래스명"을 사용한다.

3. {변수명}

자바스크립트 변수같은 곳에서 사용하던 자료를 html에서 사용 가능하다.

function App(){

  let post = '강남 우동 맛집';
  return (
    <div className="App">
      <div className="black-nav">
        <div>블로그</div>
        <div>{ post }</div> // '강남 우동 맛집'이 div 내에 들어감
      </div>
    </div>
  )
}

이처럼 데이터를 html내에 집어넣는? 것을 데이터바인딩 이라고 한다.

### 4. style속성

<div style="color:blue; font-size: 16px"> 글씨 </div>

위처럼 div 태그에 style을 부여할 때 JSX 상에서는 style={ } 안에 { } 자료형으로 집어넣어야한다.

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

이렇게 {속성명 : '속성값', ...} 형식으로 넣어야 한다.
근데 JavaScript에서 - 기호는 빼기 기호로 인식하기 때문에 font-size와 같은 속성은 대쉬기호를 빼고 앞글자를 대문자로 치환하여 사용해야한다.