JSX문법

JSX란?

JSX ( JavaScript XML)  라고하며

리액트에서 레이아웃을 만들때 쓰는 문법인데 

JavaScript 를 확장한 문법이다. 쉽게 생각해서 JavaScript 에서 HTML 을 사용 할 수 있게 만들어주는 기능을 제공하고

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

이렇게 입력하면 

React.createElement('div',null,'안녕하세요') 로 알아서 변환해 준다. 

 

 

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

JSX는 일종의 자바스크립트라서 
자바스크립트에서 사용하는 예약어인 class라는 키워드를 막 사용하시면 문제가 될수 있음
그래서 class=" " 넣고 싶으면 className이라고 써야함

 

 

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

자바스크립트에서는 
document.getElementById().innerHTML = ?

이런식으로 변수를 넣었다면 

리액트에서는 

<div>{변수명}</div> 이렇게만 해도 됨

 

function App(){

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

 

위처럼 <div className="red"> 와 같이 
href, id, className, src 등 여러가지 html 속성들에도 가능함
이렇게 변수에 있던걸 html에 꽂아넣는 작업을 [ 데이터바인딩 ] 이라고 함

 

JSX 문법 3. html에 style속성 넣고싶으면

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

 위와같이 오브젝트화 해서 { {속성명:'속성값} } 이렇게 넣어줘야함   

 또한 속성명에 대쉬기호를 쓸수 없기 때문에 모든 단어를 붙여서 써야함 붙여쓸떈 앞글자를 대문자로 치환해야함