[TIL] JSX란?

JSX란?

• JSX(JavaScript XML)는 Javascript에 XML*을 추가한 확장한 문법이다.

• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 

• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

• JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성 한다.

  XML* : XML(eXtensible Markup Language)은 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다.

JSX 문법

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.

1번 예시 <div></div> 로 감싸기
function JSX() {
	return (
    	<div>
        	<div>hello</div>
        	<p>hi!</p>
        </div>
    )
} 

1번 예시 <Fragment></Fragment> 로 감싸기
function JSX() {
	return (
    	<Fragment>
        	<div>hello</div>
        	<p>hi!</p>
        </Fragment>
    )
} 

1번 예시 <></> 로 감싸기
function JSX() {
	return (
    	<>
        	<div>hello</div>
        	<p>hi!</p>
        </>
    )
} 

2. JS 표현식을 사용할수 있다 (JSX 내부에서 코드를 {} 로 감싸야한다.)

function JSX() {
  
  const A = 'hihi';
  
	return (
    	<>
        	<div>hello</div>
        	<p>{A}</p> // 'hihi'
        </>
    )
} 

3. if문 대신 삼항연산자를 사용한다.

• if문은 JS 표현식이 아니기 때문에 JSX 내부에서는 사용할 수 없다. 그러므로 외부에서 사용해서 끌어오거나 삼항연산자를 사용해야 한다.

4. style 적용시키기

• class 대신에 className을 사용한다.

  <div className='style'>AAA</div>

• 객체형태로 스타일을 집어넣어야 한다.

  <div style={{width : '200px', height : '200px'}}>AAA</div>

• 카멜 케이스로 작성해 주어야 한다.

  <div style={{backgroundColor : 'red', fontSize : '16px', fontColor : 'blue'}}>AAA</div>