JSX 소개


아래 변수 선언을 살펴보자


const element = <h1>Hello, world!</h1>;


조금은 우스꽝스럽게도 보이는 이 문법은 문자열도 아니고 그렇다고 HTML도 아니다.
이것은 JSX라고 불리는 javascript의 확장 문법이다. React를 이용하여 UI를 표현할 때 JSX를 사용하는 것을
권장한다. JSX는 템플릿 언어를 연상시키기도 하지만 javascript의 모든 기능을 사용할 수 있다.


JSX는 React의 “elements”를 생성한다. “elements”를 DOM 구조에 렌더링하는 과정은 다음 장에서 살펴볼
것이고 여기에서는 React를 시작하는데 필요한 JSX의 기본적인 내용을 살펴볼 것이다.


Embedding Expressions in JSX


중괄호({})를 이용하면 어떠한 javascript 표현이라도 JSX에 포함시킬 수 있다. 예를 들어 ‘2+2’라는 수식이나
user.name같은 객체 표현식 또는 formatName(user)같은 함수 호출도 가능하다.


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 is an Expression Too


컴파일 후에 JSX 표현식은 일반적인 javascript의 객체들로 바뀐다. 이 말은 if문이나 for loop 내에서
JSX표현식을 변수에 할당 하거나 함수의 인자로 사용하거나 함수의 리턴 값으로 사용할 수 있다는
것이다.


function getGreeting(user) {
  if (user) {
	return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Specifying Attributes with JSX


특정 문자열을 속성 값으로 사용하기 위해 따옴표(“”)를 이용할 수 있다.


const element = <div tabIndex="0"></div>;


또한 중괄호({})를 이용하여 속성 값으로 javascript 표현식을 사용할 수도 있다.


const element = <img src={user.avatarUrl}></img>; 


속성 값으로 사용하기 위해 중괄호 내에서 따옴표를 사용하면 안된다. 이렇게 사용할 경우 JSX는 이 속성
값을 표현식이 아닌 문자열로 인식하게 된다(즉, { 2+2 }는 4로 인식하지만 {“2+2”}는 2+2라는 
문자열로 인식한다는 뜻이다). 중괄호는 표현식에 따옴표는 문자열에 각가 사용하되 두 기호를 동시에
사용하면 안된다.


Specifying Children with JSX


태그의 내용이 비어있을 경우에는 XML의 형식과 같이 />로 닫아주어야 한다. 


const element = <img src={user.avatarUrl} />;


JSX 태그는 자식을 포함할 수 있다.


const element = (
 <div>
	<h1>Hello!</h1>
	<h2>Good to see you here.</h2>
 </div>
);

주의 : 
JSX는 HTML 보다는 javascript에 가깝기 때문에 React DOM은 HTML 속성 스타일의 표기법이 아닌
camelCase 형식으로 속성 이름을 표기하도록 규정하고 있다.
예를 들면 class는 className으로, tabindex는 tabIndex로 표현하는 식이다.

JSX Prevents Injection Attacks


JSX에서의 사용자 입력은 안전하다.


const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;


기본적으로 React DOM에서는 렌더링하기 전에 JSX에 포함되는 사용자 입력 값들을 escaping 처리한다.
이런 방식은 애플리케이션에서 명시적으로 구현된 코드가 아닌 다른 코드의 주입을 결코 허용하지 않기 때문에 
안전을 보장할 수 있다. 모든 외부 코드들은 렌더링 전에 문자열로 처리된다. 이것은 XSS(cross-site-scripting)
공격을 막아준다.


JSX Represents Objects


Babel은 JSX 코드를 React.createElements()호출로 컴파일한다. 따라서 아래 두 블럭의 코드는 동일하다.


const element = (
 <h1 className="greeting">
	Hello, world!
 </h1>
);

-

const element = React.createElement(
 'h1',
 {className: 'greeting'},
 'Hello, world!'
);


React.createElements()는 버그 방지를 위한 몇가지 체크를 수행하지만 본질적으로 아래 코드와 같이
객체를 생성한다.


// Note: this structure is simplified
const element = {
 type: 'h1',
 props: {
	className: 'greeting',
	children: 'Hello, world'
 }
};


이런 객체들을 “React elements”라고 부른다. 이러한 객체들은 화면에서 보고자 하는 UI에 대한 기술로
생각해도 좋다. React는 이러한 객체를 읽고 이를 사용하여 DOM을 구성하고 최신 상태로 유지한다.


다음 장에서 DOM 구조에 React elements를 렌더링하는 방법을 살펴볼 것이다.
(제 블로그에서는 JSX에 대한 연속성을 위해 다음 포스팅에서는 JSX In Death를 번역할 것입니다.)


팁 :
“Babel” 문법 구조를 찾아내기 쉽도록 ES6와 JSX에 대해 highlight 기능이 있는 편집기를 사용하는 것을
권장한다.


'Study > React' 카테고리의 다른 글

React 살펴보기 #6  (0) 2017.03.27
React 살펴보기 #5  (0) 2017.03.04
React 살펴보기 #4  (0) 2017.02.17
React 살펴보기 #3  (0) 2017.02.11
React 살펴보기 #2  (0) 2017.02.06
React 살펴보기 #1  (0) 2017.02.06
블로그 이미지

마즈다

이제 반백이 되었지만 아직도 꿈을 좇고 있습니다. 그래서 그 꿈에 다가가기 위한 단편들을 하나 둘 씩 모아가고 있지요. 이 곳에 그 단편들이 모일 겁니다...^^

댓글을 달아 주세요