JSX 소개
🔎 React 공식문서 자료
React_JSX 소개
🔷 소개
const element = <h1>Hello, world!</h1>;- Javascript를 확장한 문법
- Javascript의 모든 기능 포함
- UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장
JSX란?
📖 참고자료
더북_리액트를 다루는 기술 [개정판]
JSX는 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼다.
아래와 같이 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태로 코드를 변환한다.
⚙️ JSX
function App() {
return (
<div>
Hello <b>react</b>
</div>
);
}⚙️ JSX 코드 변환
function App() {
return React.createElement(“div“, null, “Hello “, React.createElement(“b“, null, “react“));
}컴포넌트를 렌더링할 때마다 JSX코드로 작성하는 것이 아니라 React.createElement처럼 작성하면 불편하고 번거롭다.
JSX를 사용하면 매우 편하게 UI를 렌더링할 수 있다. 또한, React가 에러 및 경고 메시지를 표시할 수 있게 한다.
JSX에 표현식 포함하기
⚙️ 코드 예시 - 1
// name 변수 선언
const name = 'Josh Perez';
// {중괄호}로 변수 name을 감싸 JSX안에 코드 작성
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);⚙️ 코드 예시 - 2
// formatName 함수 생성 → user 객체를 받아서 값을 반환
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
// user 객체 생성
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
// {중괄호}로 감싸서 JSX안에 작성
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
// ✨ 출력값
// Hello, Harper Perez!
ReactDOM.render(
element,
document.getElementById('root')
);✨ JSX도 javascript 문법인가요?!
- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
- Babel을 이용하면 개발자들이 임의로 만든 문법 또는 차기 자바스크립트 문법들을 사용할 수 있다.
JSX 표현식
컴파일이 끝나면, JSX 표현식이 정규 Javascript를 호출하고 Javascript 객체를 인식한다.
즉, JSX도 if문 및 for loop, 변수 할당, 인자값 받기, 함수 반환을 할 수 있다.
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}JSX 속성 정의
⚙️ 코드 예시
// 어트리뷰트에 "따옴표"를 이용해 문자열 리터럴 정의 가능
const element = <a href="https://www.reactjs.org"> link </a>;
// {중괄호}를 사용하여 어트리뷰트에 Javascript 표현식 사용 가능
const element = <img src={user.avatarUrl}></img>;🛑 주의
- JSX는 HTML보다 Javascript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신
camelCase(카멜 케이스)규칙을 사용한다. - 예를 들어, JSX에서 class는
className으로 작성한다.
JSX 자식 정의
⚙️ 코드 예시
// 태그가 비어있다면 XML처럼 /를 이용하여 태그를 닫아줌 ▶ 닫힌 태그
const element = <img src={user.avatarUrl} />;
// JSX 태그는 자식 포함 가능
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
)JSX 주입 공격 방지
애플리케이션에서 명시적으로 작성되지 않은 내용은 주입하지 않는다. 모든 항목은 렌더링 되기 전에 문자열로 변환된다. 이러한 특성으로 XSS(Cross-Site-Scripting)공격을 방지할 수 있다.
const title = response.potentiallyMaliciousInput;
const element = <h1>{title}</h1>;✨ XSS(Cross-Site-Scripting)
- 사이트 간 스크립팅 or 크로스 사이트 스크립팅이라고 한다.
- 웹 애플리케이션의 취약점 ▶ 관리자가 아닌 사람이 웹 페이지에 악성 스크립트를 삽입
- 이 취약점으로 해커가 사용자의 정보(쿠키, 세션 등)을 탈취, 자동으로 비정상적인 기능을 수행하게 한다.
- 공격 유형 : 비 지속적(Non-pesistent) & 지속적(persistent) 기법
| Non-persistent | persistent |
|---|---|
| 가장 일반적인 유형, 반사 XSS라고 함 | 더 치명적인 기법 |
| 웹 클라이언트가 제공하는 HTTP 쿼리 매개 변수에서 적절하지 않고, 구문 분석 및 해당 사용자에 대한 결과의 페이지를 표시하는 공격 | 공격자가 제공한 데이터가 서버에 저장된 다음 지속적으로 정상적인 페이지에서 다른 사용자에게 노출 |
JSX는 객체를 표현
Babel은 JSX를 React.createElement()호출로 컴파일한다.
// ✨ 모두 동일한 코드!
// ex1
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
// ex2
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);React.createElement()는 버그가 없는 코드를 작성하는데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 아래와 같은 객체를 생성한다.
// 🛑 주의 : 단순화된 구조
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};이러한 객체를 React 엘리먼트라고 하며, 화면에서 보고 싶은 것을 나타내는 표현한다. React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용한다.
🛑 주의
- ES6 및 JSX 코드가 올바르게 표시되도록 편집기에
Babel언어 설정을 사용하는 것을 권장
✨ Babel
📖 참고자료
BABEL 공식문서_What is Babel?
Babel은 Javascript Compiler이다.
즉, 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링)할 수 있다.
// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);
// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
return n + 1;
});정리
⚙️ JSX 장점
- 보기 쉽고 익숙하다.
- 활용도가 높다.
1. HTML 태그에서 사용 가능
2. 컴포넌트 안에서 JSX 사용 가능
🌺 Comment
리액트 공식 문서를 보면서 기초를 탄탄하게 만들어 보자..!! ╰(°▽°)╯
