JSX란 무엇일까.
한번쯤 JSX, JSX 하는걸 들어보았지만 오늘 한 번 제대로 알아보자.
js가 들어가 있으니 자바스크립트와 관련있어 보인다.
이건 자바스크립트를 확장한 문법이다.
즉 문법이고 형식이 있다. 규칙도 있다.
JSX란?
JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. - 웹브라우저는 HTML, CSS, JavaScript만 읽을 수 있기때문에 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
여기서 XML은 뭘까
html과 비슷한걸 보니 X-Markup-Language 일 것 같다.
그럼 얘는 마크업 언어인걸까?
XML이란?
- W3C에서 개발된, 다른 특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어이다.
- XML(Extensible Markup Language)은 데이터를 정의하는 규칙을 제공한다.
- XML은 주로 다른 종류의 시스템, 특히 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 하여 HTML의 한계를 극복할 목적으로 만들어졌다.
마크업 언어가 맞다.
XML은 이름/값 짝으로 이루어진 마크업 구조로 시작 태그 또는 빈 태그 안에 쓰인다.
<img src="madonna.jpg" alt='Foligno Madonna, by Raphael'/>여기서 element img는 src와 alt라는 Attribute(속성)를 갖는다.
그러면 JSX는 어떻게 사용할까
문법은 앞서 설명한 XML과 같다.
그래서 익숙할 수 있다.
조건문
JSX안에서는 if else문을 사용할 수 없기에 삼항연산자를 사용한다.
return (
<div>
<h1>{ i === 1 ? 'true' : 'false' }</h1>
</div>
);또한 삼항 연산자 안에서 다시 함수나 JSX를 사용할 수 있다!!
return (
<div>
{
sections.length > 0
? sections.map(n => <div>Section {n}</div>)
: null
}
</div>
);CSS-IN-JS
같이 사용 시 코드의 길이를 줄여주는 스타일 지정 방법이다!
emotion 라이브러리를 사용해서 자바스크립트로 CSS를 작성할 수 있다.
일단 설치를 해줘야한다.
yarn
yarn add @emotion/react
yarn add @emotion/styled
npm
npm i @emotion/css
npm i @emotion/styled @emotion/react
설치가 끝나면 스타일 컴포넌트를 따로 뺐을 때와 그렇지 않을 때 2가지 import 방식이 있다.
JSX와 같은 파일에 적어줄 경우
const Title = styled.h2`
font-size: 15px;
color: #fff;
`
return(
<Title>안녕하세요</Title>
)원래 h2태그 안에 있던 '안녕하세요'를 태그를 바꿔주면서 의미도 쉽게 알 수 있게 되고 스타일을 인라인방식으로 안써줘서 코드의 길이도 짧아질 수 있다!
style컴포넌트를 따로 빼줄 때
위에 예제를 나눠보자.
1) 태그를 하나하나 import 하는 방법
// style 파일
import styled from "@emotion/styled";
export const Title = styled.h2`
font-size: 15px;
color: #fff;
`
// js 파일
import { Title } from "연결한 파일 경로"
return(
<Title>안녕하세요</Title>
)import여부와 태그 이름은 대문자로 시작해야한다는 점을 유의하자!
2) 태그를 전체적으로 import 하는 방법
// style 파일
import styled from "@emotion/styled";
export const Title = styled.h2`
font-size: 15px;
color: #fff;
`
// js 파일
import * as S from "연결한 파일 경로";
return(
<S.Title>안녕하세요</S.Title>
)style부분은 같고 import를 태그 하나하나 하기 너무 번거롭고 태그가 많으면 지저분해 지기 때문에 import * as S from "연결한 파일 경로" 이렇게 해주면 태그 앞에 S만 붙여도 된다. S는 편한대로 다른걸로 바꿔도 무방하다.
이렇게 JSX와 CSS-IN-JS를 가지고 JavaScript로 html,css를 만들어보았다.
