React - JSX의 개념

1. JSX란?

다음과 같은 것을 JSX라고 하며 JavaScript를 확장한 문법이다.

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

이는 JavaScript의 모든 기능을 포함하고 있으며, React Element를 생성할 수 있다. React에서의 JSX 사용은 필수가 아니지만, 대부분 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 한다. 또한 React가 더욱 유용한 에러 및 경고 메시지를 표시할 수 있게 해준다.

주의할 점

클래스 컴포넌트의 render함수나 함수 컴포넌트의 return 구문에서 형제 노드를 쓸 수 없다. → 다음과 같은 하나의 태그로 감싸줘야함

1. <React.Fragment></React.Fragment> 또는 <></>
   → 위 두 가지는 투명한 태그임
2. <div></div> 등의 다른 태그들

2. 표현식

2.1 표현식 포함하기

// 예시1
const name='Merry Ha';
const element=<h1>Hello, {name}</h1>;

ReactDOM.render(element, document.getElementById('root')
);

// 예시2
function formatName(user){
  return `${user.firstName} ${user.lastName}`;
}
const user={
  firstName:'Merry',
  lastName:'Ha'
}
const element=(
  <h1>
  	hello, {formatName(user)}!
  </h1>
);
ReactDOM.render(element, document.getElementById('root')
);

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.
( e.g. 2+2, user.firstName, formatName(user)... )

가독성을 좋게 하기 위해 JSX는 여러 줄로 쓰는 것이 좋으며, 괄호로 묶는 것이 권장된다.

2.2 JSX도 표현식

컴파일이 끝나면 JSX 표현식이 정규 JavaScript 함수를 호출하고 JavaScript 객체로 인식된다. 즉, JSX를 if문 및 for loop 안에서 사용할 수도, 변수에 할당할 수도, 인자로서 전달하거나 함수로부터 반환할 수도 있다.

예시)

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

3. 속성 정의

따옴표를 이용해 문자열 리터럴을 정의할 수 있다. JSX는 HTML보다 JavaScript에 가깝기 때문에 React DOM은 camelCase 명명 규칙을 사용한다. ( e.g. JSX에서 class는 className이 됨 )

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

아래와 같이 중괄호를 사용하면 속성에 JavaScript 표현식도 삽입할 수 있다.

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

❗주의
동일한 어트리뷰트에 중괄호(표현식에 사용)와 따옴표(문자열 값에 사용)는 동시에 사용하면 안됨

4. 자식요소 정의

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

태그가 비어있을 경우, />로 바로 닫아줘야한다.

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

5. 특성

1. XSS 공격 방지
기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 escape 및 문자열로 변환하기 때문에, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.

2. 객체를 표현
Babel은 JSX를 React.createElement() 호출로 컴파일한다.

다음 두 예시는 동일합니다.

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

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

React.createElement()는 버그 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성한다.

// 주의: 다음 구조는 단순화됨
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

이러한 객체를“React 엘리먼트라고 하며, 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 된다. React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용한다.

Reference

https://ko.reactjs.org/docs/introducing-jsx.html