3. JSX

JSX

JSX는 리액트에서 생김새를 정의할 때 사용하는 문법입니다. 얼핏보면 HTML 같지만 실제로는 JavaScript입니다. 리액트 컴포넌트에서 XML 형태로 코드를 작성하면 바벨이 JSX를 JavaScript로 변환해줍니다.

 

* 바벨은 자바스크립트의 문법을 확장해주는 도구입니다. 최신 문법을 구형 브라우저에서도 실행할 수 있도록 해줍니다. JSX가 JavaScript로 제대로 변환이 되려면 지켜주어야 하는 몇가지 규칙이 있습니다.

 

1. 꼭 닫혀야 하는 태그

 

태그는 꼭 닫혀야 합니다. 만약 <div><span></div>라면 당연히 에러가 발생할 것입니다. 하지만 알아야 할 것이 HTML을 보면 <input>또는 <br> 등 열고 닫는 것이 하나로 되는 태그가 있지만 리액트는 XML 방식이기 때문에 열면 무조건 닫아야 합니다.

 

* 열고 닫히는 태그 즉 하나의 태그에 열고 닫힘 기능이 있는 태그를 Self Closing 태그라고 부릅니다.

 

2. 가장 큰 태그로 감싸야 한다

빨간 줄이 간 것처럼 이와 같은 방법은 JSX를 위반하는 방법입니다. 

에러가 발생한 것을 확인할 수 있습니다. 즉 JSX의 두번째 규칙 가장 큰 태그로 감싸야 한다 즉 아래와 같이 한다면 에러가 발생하지 않을 것입니다.

* 하지만 단순히 감싸기 위하여 불필요한 <div>로 감싸는게 별로 좋지 않은 상황도 있습니다. 예를 들면 CSS를 적용하는데 복잡하게 되는 상황도 올 수 있습니다. 그렇기 때문에 우리는 react의 Fragment라는 것을 사용합니다.

 

3. JSX 안에 자바스크립트 값 사용하기

 

JSX 내부에 자바스크립트 변수를 보여줘야 할 때는 중괄호({ })를 감싸서 보여줍니다. 

 

 

4. style과 className

 

JSX에서 태그에 style과 CSS class를 설정하는 방법은 기존의 HTML과 차이가 있습니다. 우선 인라인 스타일을 객체 형태로 작성을 해야하며 하이픈을 사용할 수 업시 때문에 camelCase 형태로 네이밍을 해주면 됩니다.

 

위의 방법을 보면 style이라는 객체를 만들어 그 값을 HTML style 태그 안에 넣음으로써 CSS가 설정되게 할 수 있습니다. 또한 기존의 class가 아닌 className으로 설정을 해주면 됩니다.

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

 

주석

 

JSX에서 주석은 {/* ~~*/} 이런 형태로 사용합니다.

 

태그 내부에서는 //로 주석 사용도 가능합니다.