React 기초 개념을 깊이 다지고자, React 자습서 + React 공식 문서를 읽으며 공부/정리한 글입니다.
JSX 란?
Javascript 파일을 HTML과 비슷하게 마크업을 작성할 수 있도록 해주는 Javascript 확장 문법
React 에서는 본질적으로 렌더링 로직이 UI 로직 (이벤트 처리 방식, 시간에 따라 state 변하는 방식, 화면에 표시하기 위해 데이터 준비되는 방식 등)과 연결된다는 사실을 전제한다.
React는 별도의 파일에 마크업과 로직을 분리하는 대신, 둘 다 포함하는 "컴포넌트" 라는 유닛을 사용한다.
JSX에 표현식 포함하기
JSX의 중괄호 안에는 유효한 모든 JS 표현식을 넣을 수 있다.
예를 들어, 2 + 2, user.firstName, formatName(user) 등은 모두 유효한 Javascript 표현식이다.
문(Statement)이 아닌 표현식(Expression)이라는 것에 주의!
아래 예시와 같이 formatName(user) 라는 표현식의 값을 <h1> 엘리먼트에 포함할 수 있다.
const formatName = (user) => {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Sujin',
lastName: 'Jo',
};
const element = (
<h1>Hello, {formatName(user)}!</h1>;
)JSX도 표현식이다
컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식된다.
즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있다.
- 함수 반환값으로 사용되는 JSX 예
const getGreeting = user => {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}JSX 는 주입 공격을 방지한다
기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 처리한다. (태그 문자(<, >) 등 XSS 공격 위험이 있는 문자를 <, >와 같이 의미 없는 문자열로 바꿔서 렌더링해준다.)
따라서 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.
모든 항목은 렌더링되기 전에 문자열로 변환되므로, *XSS(cross-site-scripting) 공격을 방지할 수 있다.
참고) *XSS 공격이란
: 공격자가 웹 페이지 내에 스크립트를 삽입하고 삽입한 코드를 실행시켜 의도치 않은 행동을 수행시키거나 쿠키나 세션 토큰 등의 민감한 정보를 탈취하는 공격 기법
JSX 는 객체를 표현한다
*Babel은 JSX를 React.createElement() 호출로 컴파일한다.
따라서 아래의 코드가 다음과 같이 변환된다.
// JSX 문법
const element = (
<h1 className="greeting">
Hello, world!
</h1>
)// Babel 사용 후 JSX => React.createElement 문법
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
)React.createElement() 는 버그가 없는 코드를 작성하는데 도움이 되도록 몇 가지 검사를 수행하여 기본적으로 다음과 같은 객체를 생성한다.
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};이러한 객체를 "React 엘리먼트"라고 하며, 화면에서 보고 싶은 것을 나타내는 표현이다.
(참고) *Babel 이란
: 모든 브라우저가 최신 JavaScript 문법을 지원하는 게 아니기 때문에, 최신 JavaScript 문법을 이전 버전으로 변환하여, JavaScript 코드가 다양한 브라우저/환경에서 동작할 수 있도록 해주는 JavaScript 컴파일러
-> 모든 사용자가 최신 기능 활용 가능, 다양한 브라우저/기기에서 일관된 동작 보장
React 에서 마크업과 렌더링 로직을 같이 사용하는 이유
수년 동안 Web은 HTML, CSS, JavaScript 를 기반으로 만들어져 왔다.
웹 개발자는 HTML로 내용을 마크업 했고, CSS로 디자인을, JavaScript로 페이지의 로직을 작성해왔고, 보통 HTML, CSS, JavaScript를 분리된 파일로 관리했다.
그러나 Web이 더욱 interactive 해지면서, 로직이 내용을 결정하는 경우가 많아졌다.
이것이 React에서 렌더링 로직과 마크업이 같은 위치(컴포넌트)에 있게 된 이유이다.
즉, JSX = 자바스크립트에 마크업 넣은 버전 이다.
참고
