JSX

babeljs.io에 접속하여 try it out을 누른후  왼쪽에 다음과 같은 코드를 입력하면 오른쪽의 코드들이 나타난다.

왼쪽에 적은 코드를 JSX라고 한다.

 

 

JSX 규칙에 따라 작성된 코드들은 babel이라는 도구를 이용해 자바스크립트 문법으로 변환된다. 쉽게 생각하면 리액트를 사용하면서 JSX를 사용하게 되고 이는 결국 자바스크립트문법으로 변환된다는 것을 인지하고 있으면 된다. 어떻게 변환이 되고 하는 구체적인 내용들을 사용이 익숙해지고 나서 찾아보면 될 것이다.

 

JSX는 리액트를 사용할 때 컴포넌트의 생김새를 정의할 때 사용된다. 

 

 JSX를 사용하는 규칙은 다음과 같다.

1. 닫는 태그가 항상 있어야한다.

JSX를 사용할 때 br태그를 사용하려면 <br />처럼 닫는 태그를 작성해야 한다.

 

2. 하위 요소에 아무 것도 없다면 <태그 /> 를 써야한다.

<div></div>에서 하위 요소에 아무것도 없기 때문에 <div />

 

3. 2개 이상의 태그는 하나의 태그로 감싸져야 한다.

JSX에서 두 개 이상의 태그인 경우는 감싸져야 한다.  

<div>1</div>

<div>2</div>

이런 경우에 두 개의 태그가 있는데 하나로 감싸져있지 않았다. 이것을 감싸주어야 한다.

 

<div>

  <div>1</div> 

  <div>2</div>

</div>

이렇게 하여 규칙을 만족시킨다. 감싼 div도 html 구조에 추가된다. 하지만, 감싼 div가 아무 의미가 없고 구조적으로 필요한 것이 아닐 수 있다. 

 

<>

  <div>1</div> 

  <div>2</div>

</>

이 때는 이렇게 작성한다.

 

이렇게 되면 babel에 의해 자바스크립트로 변환되고 실제 화면에 보여질 때 html 코드 상에서 감싸는 부분의 코드가 나타나지 않는다.

 

4. JSX에서 변수를 사용하려면 { 변수명 }

const name ="hello"

<div> {name} </div>

 

5. style관련 문법에서 - 대신 카멜 케이싱 사용

background-color 대신 backgroundColor 사용

 

6. JSX에서 스타일을 적용하려면 객체를 만들어 적용한다.

const style = { backgroundColor: red};

<div style={style}> Hello </div>

 

7. 클래스 이름 사용시 class대신 className 사용

<div class="wrap"> 대신 <div className="wrap"> 사용

 

8. 주석은 {/* 주석 내용 /*} 형식 사용

태그 안에 주석을 넣고 싶을 떄는 다음과 같이 사용

< Hello

 // 주석내용

/>