다음 변수 선언을 확인하세요.
const element = <h1>Hello, world!</h1>;이 태그 구문은 문자열이나 HTML이 아닙니다.
이것은 JSX라고하며 JavaScript의 구문 확장입니다. UI가 어떻게 생겼는지 확인하려면 React와 함께 되어야 합니다. JSX는 템플릿 언어처럼 보일 수 있겠지만 JavaScript의 모든 기능을 제공합니다.
JSX는 React "elements"를 생성합니다. 다음 섹션 에서 Rendering Elements에 대해 알아 보겠습니다. 아래에서 JSX를 시작하는데 필요한 기본 사항을 배울 수 있습니다.
Why JSX?(왜 JSX인가?)
React는 렌더링 로직이 다른 UI 로직과 결합되어 있습니다. 즉 이벤트 처리 방법, 시간 경과에 따른 상태 변경 방법 및 데이터 표시 준비 방법이 포함되어 있습니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 "components"라고 불리는 느슨하게 연결된 단위와 관심사를 분리(SoC)합니다. 이후 섹션(Components and Props)에서 다시 컴포넌트로 돌아 오겠지만 JS에 마크업을 넣는 것이 익숙하지 않다면 이 이야기를 확인하세요
React는 JSX 사용을 필수로 하지 않습니다, 하지만 대부분의 사람들은 자바스크립트 코드 내부의 UI로 작업할 때 시각적으로 더 도움된다고 생각합니다. 또한 React가 보다 도움이 되는 에러 및 경고 메시지를 표시할 수 있습니다.
우선 시작해 봅시다.
Embedding Expressions in JSX(JSX에 표현식 포함하기)
아래 예제는 변수 name을 JSX내에서 중괄호로 묶어 사용합니다.
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);유효한 JavaScript 표현식을 JSX의 중괄호안에서 사용할 수 있습니다. 예를 들어 2 + 2, user.firstName, formatName(user) 모두 사용 가능합니다.
아래 예시와 같이 JavaScript 함수 호출의 결과(formatName(user))를 <h1>안에 사용 수 있습니다.
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);우리는 가독성을 위해 JSX를 여러 줄로 나누었습니다. 필수는 아니지만이 이 작업을 수행 할 때는 자동 세미콜론 삽입 의 함정을 피하기 위해 괄호로 묶는 것이 좋습니다 .
JSX is an Expression Too(JSX 또한 표현식이다)
컴파일 후 JSX 표현식은 일반 JavaScript 함수 호출이되고 JavaScript 객체로 평가됩니다.
즉, JSX를 if명령문과 for루프 안에서 사용할 수 있고, 변수에 할당하고, 함수의 인수로 받을 수 있고 반환 할 수 있습니다.
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}Specifying Attributes with JSX(JSX 속성 정의)
따옴표를 사용하여 문자열 리터럴을 속성으로 지정할 수 있습니다.
const element = <div tabIndex="0"></div>;중괄호를 사용하여 속성에 JavaScript 표현식을 포함시킬 수도 있습니다.
const element = <img src={user.avatarUrl}></img>;속성에 JavaScript 표현식을 포함 할 때 중괄호를 따옴표로 묶지 마십시오. 따옴표는 문자열 값의 경우 사용하고, 중괄호 는 표현식의 경우 사용해야 합니다. 같은 속성에 둘 다 사용하면 안됩니다.
경고
JSX는 HTML보다는 자바스크립트에 가깝기 때문에, React DOM은 HTML 속성 이름 대신 camelCase 속성 이름 컨벤션을 사용합니다.예를 들어, JSX에서 class는 className 이 되며, tabindex는 tabIndex가 됩니다.
Specifying Children with JSX(JSX 자식 정의)
태그가 비어 있으면 />XML처럼 닫아야 합니다.
const element = <img src={user.avatarUrl} />;JSX 태그는 자식을 가질 수 있습니다.
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);JSX Prevents Injection Attacks(JSX 인젝션 공격 예방)
유저 입력을 JSX내에 포함시키는 것이 안전합니다.
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;기본적으로, React DOM은 렌더링 되기 전에 JSX 내에 포함된 모든 값을 이스케이프 처리 합니다. 따라서 어플리케이션에 명시적으로 작성되지 않은 내용은 절대 삽입할 수 없습니다. 모든 것은 렌더링 되기 전에 문자열로 변환됩니다. 이렇게 하면 XSS(cross-site-scripting) 공격을 막을 수 있습니다.
JSX Represents Objects(JSX 객체 표현)
Babel은 JSX를 React.createElement()호출 하여 컴파일 합니다.
아래 두 예제는 동일합니다.
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);React.createElement()는 버그없는 코드를 작성하는 데 도움이되는 몇 가지 검사를 수행하지만 기본적으로 다음과 같은 객체를 만듭니다.
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};이 객체는 "React elements"라고 부릅니다. 화면에서 볼 수 있는 내용에 대한 설명으로 생각할 수 있습니다. React는 이 객체를 읽어들이고 이를 사용하여 DOM을 구성하고 최신 상태로 유지합니다.
다음 섹션에서 React 요소를 DOM에 렌더링 하는 방법을 살펴보겠습니다.
팁
ES6 및 JSX 코드가 모두 올바르게 표시되도록 선택한 편집기에 "Babel" 언어 설정 을 사용하는 것이 좋습니다. 이 웹사이트에서는 호환 가능한 Oceanic Next 컬러 스킴을 사용합니다.
