[React] JSX

JSX란?

JavaScript XML의 줄임말로 JavaScript Code 내부에 테그 기반 문법을 사용할 수 있도록 해주는 기술이다. 

React Framework는 JSX를 웹 페이지가 이해 가능한 JavaScript Code로 변환한다.

 

JSX Rule 

1. return 메서드 내부에는 반드시 하나의 태그로 감싸야 한다. 

아래와 같이 p태그 2개를 병렬로 중첩하는 형태는 불가능하다. 

  return (
      <p>test1</p>
      <p>test2</p>
  )

 

여러 요소를 리턴하기 위해서는 하나의 태그로 감싸 주어야 한다. 

  return (
    <div>
      <p>test1</p>
      <p>test2</p>
    </div>
  )

 

2. Tag에 class를 적용할 때 class 대신 className을 사용하자. 

html 코드에 style을 지정할떄는 class라는 수식어를 사용한다. 

그러나 JSX는 Javascript의 class 예약어와의 혼동을 피하기 위해 className을 사용한다. 

 

기존 HTML 방식 

  return (
    <div>
      <p class="title">novDev</p>
    </div>
  )

 

JSX 방식

  return (
    <div>
      <p className="title">novDev</p>
    </div>
  )

 

3. JSX Variable DataBinding 

JSX 내부에서 JavaScript 표현식을 사용할 때 { } 내부에 명시한다. 

이는 반드시 문자열 뿐 만 아니라 속성 내부에 바인딩하는 것 또한 가능하다. 

  let name = "nov"
  let link = 'http://google.com'
  return (
    <div>
      <p">by dev { name }</p>
      <a href= {link}>Link</a>
    </div>
  )

 

4. JSX Style 적용 방법

기존에 Html에서 태그 내부에 style을 적용할때 style=""와 같이 명시했다. 

그러나 JSX 문법에서는 {{}} 기호 내부에 스타일 그리고 속성을 명시해야 한다. 
또한 이는 자바스트립트 객체 자료형 이기에 스타일 이름에 대시(-)를 쓸 수 없으며, 카멜케이스로 구분해야 한다. 

font-size:'30px' (x)

fontSize:'30px' (o)

  return (
    <div>
      <h4 style={{ fontSize: '30px'}}>style test</h4>
    </div>
  )