JSX란?
- 자바스크립트를 확장한 문법으로 리액트와 함께 사용된다
- 리액트 엘리먼트를 생성한다
const element = <h1>리액트 공부한드앗</h1>;
JSX 표현식으로 쓰기
- 표현식으로 쓸 때는 선언한 변수를 활용할 때 중괄호로 감싸서 표현한다.
const mydinner = "hamburger";
const element = <h1>I had {mydinner} for my dinner</h1>;
//I had hamburger for my dinner
- JSX는 컴파일이 끝나면 자바스크립트 함수에서 호출되고 자바스크립트 객체로 인식된다.
- JSX를 if문 , for문, parameter, return 값으로 사용할 수 있다.
function myfood (user) {
if (user) {
return <h1>I'd like to have {mydinner} for my dinner</h1>;
}
return <h1>Let's skip dinner today</h1>;
}
- attribute에 표현식 삽입 가능
- 따옴표로 문자열처럼 삽입 or 중괄호 표현식 이용 가능
- 둘 중에 하나만 쓸 수 있다
const naver = <a href="http://www.naver.com">Naver</a>;
const logo = <img src={naverLogo}></img>;
리액트 돔에서 attribute는 CamelCase 규칙을 적용한다.
ex) className
JSX는 XSS공격 방지가 가능하다
- XSS(Cross-site scripting): 여러 사용자가 이용하는 곳에 의도적으로 악성 스크립트를 입력해서 사용자들의 정보를 탈취하는 해킹 방법
- html 이스케이프: 특수문자를 html로 변환하는 것(예- 는 공백 의미)
- JSX는 렌더링하기 전에 이스케이프 하고 명시적으로 등록하지 않은 것(변수 선언 등)은 문자열로 변환된다
- 문자열로 변환되기 때문에 악성코드는 문자열로 변환되어 적용되지 않고, 그래서 XSS공격 방지가 가능하다.
JSX는 자식을 포함할 수 있다
1. 자식이 없는 경우
const element = <img src="www.xxx.com/image" />;
2. 자식을 포함할 경우
const element = (
<div>
<h1>오늘 저녁 메뉴</h1>
<p>피자</p>
<p>햄버거</p>
</div>
);
리액트의 특징
- 마크업과 로직을 분리하지 않고 "컴포넌트(component)"로 관심사를 분리한다.
(컴포넌트 부분에 대해서는 컴포넌트 부분에서 자세하게 다룰 예정)
- JSX 사용이 필수는 아니지만 JSX 사용 시 UI 관련 작업 시 더 용이하다
관심사를 분리한다의 의미
JSX 문법 예시로 보면 좋은 사이트
Airbnb JSX guide KR