React란?
React는 UI를 만들기 위한 JavaScript 라이브러리 입니다.
JSX 소개
javaScript를 확장한 문법으로 React의 element를 생성합니다. HTML처럼 보이는 코드를 작성할 수 있게 해줍니다.
// 이런식으로 말이죠!
const element = <h1> Hello world </h1>;React에서 JSX의 사용은 필수적이지 않지만, 코드의 가독성 측면에서 더 도움이 되고 React에 도움이 되는 에러 및 경고 메세지를 표시할 수 있게 해준다고 공식문서에서는 말하고 있습니다.
JSX에 표현식 포함하기
const hello = 'Hello, World!';
const element = <h1>{hello}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);JSX는 위와 같이 변수를 선언한 뒤 중괄호로 감싸 JSX 안에 사용이 가능합니다. JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다.
JSX도 표현식이다.
컴파일이 끝나면 JSX 표현식이 JavaScript 객체로 인식됩니다.
즉,
- 조건문 및 반복문 loop 안에서 사용
- 변수에 할당
- arguments로 사용될 수 있으며
- 함수로부터 return 될 수 있습니다.
JSX attributes 정의
JSX attributes를 정의하는 방법은 두 가지가 있습니다.
첫째로는 따옴표를 사용해서 정의하는 방법입니다.
const firstImage = <img src="123.png" />;둘째로는 중괄호를 사용해서 JavaScript 표현식을 삽입하는 방법입니다.
const user = {
image: 'profile.jpg'
};
const secoundImage= <img src={user.image} />;⚠️ 주의사항
1. 두번째 방법을 사용할 경우 중괄호 주변에 따옴표를 입력하면 안된다.
2. 두가지 방법 중 한가지만 사용해야 한다.
3. JSX는 HTML보다 JS에 가깝기 때문에, camelCase 를 따릅니다.
JSX로 Children 정의
태그가 비어있다면 XML처럼 />를 이용해서 바로 닫아주어야 하고, JSX 태그는 Children을 포함할 수 있습니다.
const children = (
<div>
<h1>안녕하세요!</h1>
<h2>좋은 아침, 점심, 저녁입니다.</h2>
</div>
);JSX는 Injection Attacks을 방지합니다.
기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링 하기 전에 escape 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 Injection 되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환됩니다. 이런 특성으로 인해 XSS(cross-site-scripting) 공격을 방지할 수 있습니다
여기서 조금 어려운 개념 두가지가 나오는데요. escape와 XSS 입니다. JSX를 이해하기 위해 두 개념을 간략하게 짚고 넘어가자면
escape란?
- 특정 문자를 HTML로 변환하는 행위
XSS(cross-site-scripting)란?
- 웹 어플리케이션에서 사용자 입력 값에 대한 필터링이 제대로 이루어지지 않을 경우, 공격자가 입력이 가능한 폼에 악의적인 스크립트를 삽입하여 해당 스크립트가 사용자 측에서 동작하도록 하여 악의적인 행위를 수행하는 보안 공격
JSX는 객체를 나타냅니다.
Babel은 JSX를 React.createElement() 호출로 컴파일 합니다. 따라서 아래의 두 예시는 동일한 결과를 나타냅니다.
const cat1 = (
<h1 className="catInfo">
고양이는 사납다
</h1>
);
const cat2 = react.createElement(
'h1',
{className: "catInfo"},
'고양이는 사납다'
);React.createElement() 는 버그가 없는 코드를 작성하는데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성합니다.
// 아주아주 단순화된 예시 구조입니다.
const cat = {
type: 'h1',
props: {
className: 'catInfo',
children: '고양이는 사납다'
}
};이러한 객체를 'React element'라고 하며, 화면에서 보고 싶은 것을 나타내는 표현이라고 생각하면 됩니다. React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용합니다.
