JSX란?

JSX는 JavaScript XML로 JavaScript에 XML을 추가하여 확장한 문법이다.

react.js에서는 HTML을 구성할 때 이 JSX 문법을 자주 사용하는데, 생김새는 HTML이지만 실제로는 JavaScript이다.

우리가 리액트 파일에서 JSX로 코드를 작성하면 Babel을 통해 JavaScript로 변환된다.

 

(추가)

babel은 자바스크립트 코드를 변환해 주는 컴파일러로써, babel을 사용하면 최신 자바스크립트 문법을 지원하지 않는 환경에서도 최신 문법을 사용할 수 있다.

또한, JSX문법으로 작성된 코드를 createElement 함수를 호출하는 코드로 변환해 주어 리액트에서 JSX 문법을 사용하기 위해 사용이 된다.

 

다음 코드는 JSX의 예시이다.

const App(){
    return(
        <div>
            <Header></Header>
            <Content></Content>
            <Footer></Footer>
        </div>
    );
}

return 안에 있는 html태그들이 JSX 문법으로 짜여진 코드이다.

 

우리가 JSX를 사용할 때 주의할 점이 몇 가지 있다.

1. 최상위 태그는 항상 1개여야 한다.

const App(){
    return(
        <Header></Header>
        <Content></Content>
        <Footer></Footer>
    );
}

이렇게 최상위코드가 1개보다 많게 되면 오류가 발생한다.

그래서 div태그로 감싸주던지, 불필요한 div 태그가 싫다면 빈 태그 (<> </>)로 감싸주면 된다.

 

 

2. 표현식을 사용할 수 있다.

JSX에서는 표현식을 사용할 수 있는데, 중괄호로 감싸주면 된다.

<h1>{10 + 1}</h1>

이는 '<h1>11</h1>'이랑 같은 역할을 한다.

 

다만, JSX에서는 if문을 사용할 수 없어서, 조건부 연산자를 사용하여야 한다. (for문도 사용 불가)

<div>{ 조건 ? <h1>참</h1> : <h1>거짓</h1> }</div>

만약 조건이 참이라면 '<div><h1>참</h1></div>'와 같은 역할을 할 것이고,

만약 조건이 거짓이라면 '<div><h1>거짓</h1></div>'와 같은 역할을 할 것이다.

 

 

3. 스타일 및 class를 지정할 때 카멜 표기법(camel case)를 사용해야 한다.

스타일 중 background-color와 같은 단어는 backgroundColor로 표시해야 하며,

태그의 class를 지정하고 싶으면 className이라고 표시해야한다.

<div className="box"></div>

 

 

4. 태그는 항상 닫히거나 쌍을 이루어야 한다.

html에서는 <input>, <hr>과 같이 단독으로 쓸 수 있는 태그들이 있었지만, JSX에서는 오류가 발생한다.

따라서 항상 닫힘 태그와 같이 오거나, 태그 자체가 닫혀있어야 한다.

<div> ... </div>

<input />

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)