JSX

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

  자바스크립트의 확장 문법이다. 문자열도 HTML도 아니며, 템플릿 언어가 아닌 자바스크립트를 기반으로 하고 있다.

 JSX는 리액트의 element를 만든다.

 

리액트에서 JSX를 사용하는 이유

리엑트는 렌더링 로직이나 다른 UI 로직과 본질적으로 결합되어 있으며, 이벤트 처리방법, 시간에 따른 변경 방법, 데이터 표시 등을 포함하고 있다. 리엑트는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하며, 이를 모두 포함하는 컴포넌트라 불리는 느슨한 연결 유닛으로 관심사를 분리한다.

리엑트에서 JSX사용을 필수로 하지 않지만 자바스크립트 코드 내부의 UI로 작성시 시각적으로 도움을 줄 수 있다.

 

간단한 표현식

function formatName(user) {
	return user.firstName + '' + user.lastName;
}

const user = {
	firstName : '김',
    lastName:'밥'
};

const element = (
<h1>
	안녕, {formatName(user)}!
</h1>
);

ReactDom.render(
element,
document.getElementById('root')
};

 

JSX도 자바스크립트의 객체로 인식된다.

 컴파일 이후에는 JSX 표현식이 정규 자바스크립트 함수로 호출이 되며 자바스크립트 객체로 인식이 되기에 if나 for 문 내에서 JSX를 사용할 수 있으며, 변수 할당이나 매개변수로 전달하거나 함수에서 반환하는 것 또한 가능하다.

function getGreeting(user){
	if(user){
    return <h1>안녕, {formatName(user)}!</h1>;
    }
    return <h1>안녕, 낯선이</h1>;
}

 

JSX 속성 정의

속성에 따움표를 이용해 문자열 리터럴을 정의할 수 있으며, 속성에 중괄호를 이용해 자바스크립트 표현식을 포함하는 것 또한 가능하다.

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

※속성에서 자바스크립트 표현식을 포함하는 경우 중괄호(표현식) 또는 따옴표(문자열 값인 경우) 중 하나만 같은 속성에 사용해야 한다. 또한 JSX는 자바스크립트에 가깝기에 카멜케이스를 사용

 

JSX 자식 정의

태그가 비어있는 경우 />으로 닫아 주어야 하며, 아래와 같이 자식을 가질 수 있다.

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

 

JSX 인젝션 공격 예방

유저 입력을 JSX내에 포함시키는 것이 안전하다.

const title = response.potentiallyMaliciousInput;

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

리액트 DOM은 렌더링 되기 이전에 JSX내에 포함된 모든 값을 escape하며 어플리케이션에서 명시적으로 작성되지 않은 내용은 절대 삽입할 수 없다. 모든 것이 렌더링 되기 전에 문자열로 반환되어 XSS(cross-site-scripting)공격을 막을 수 있다.

 

JSX 객체 표현

Babel은 JSX를 React.createElement()로 호출 컴파일 한다.

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

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

위의 두 예제는 동일하다.

React.createElement()는 버그 없는 코드를 작성하는데 도움을 주는 몇가지 체크를 한다. 기본적으로는 아래와 같은 객체를 생성한다.

const element = {
	type: 'h1',
    props: {
    className: 'greeting',
    children: 'Hellow,world'
    }
};

이 객체는 React elements라고 불리며 React는 이 객체를 읽어들이고 사용하여 DOM을 구성하여 최신 상태로 유지한다.

 

JSX 문법 규칙

감싸인 요소 규칙 컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 감싸야하 한다. virtual DOM에서 컴포넌트 변화를 감지해 낼 때, 효율적으로 비교할수 있도록 컴포넌트 내부는 하나의 DOM tree 구조로 이루어져야 한다는 규칙이다.

if문 보다는 삼항연산자나 and 연산자를 사용하는 것이 좋다.

undefined 상황을 제외하기 위해 오류처리를 해주어야 한다.