[React 주요 개념] 01. JSX

키워드

• View를 다루는 JavaScript 라이브러리다.
• Rendering & Update만을 지원한다.
  • http client와 같은 부가기능은 지원하지 않는다.
• Component Based Development
  • 독립적인 코드 블럭(HTML + CSS + JS)
  • 컴포넌트가 작업의 단위다.
• Real DOM이 아닌 Virtual DOM을 사용한다.
• JSX
  • JavaScript를 확장한 문법으로 JS의 모든 기능이 포함돼있다.
  • React 엘리먼트를 생성한다.
• CSR과 SSR 모두 구현할 수 있다.

JSX

참고) JSX 소개 – React (reactjs.org)

JSX 소개 – React

JSX란?

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

위의 문법은 문자열도, HTML도 아닌 JSX 문법이다.

 

React에서는 렌더링 로직이 UI 로직(이벤트 처리 방식, State 변화 방식, 데이터 준비 방식 등)과 연결된다.

React는 마크업과 로직을 포함하는 '컴포넌트' 유닛으로 관심사를 분리(SoC)한다. 즉, 컴포넌트를 통해 모듈화를 한다.

JSX에 표현식 포함하기 (보간법)

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>; // 보간법은 중괄호 { } 이다.

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

JSX에서는 JavaScript 표현식을 사용하기 위해 중괄호({ })를 사용한다. 

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 표현식이 정규 JS 함수 호출이 되고, JS 객체로 인식된다.

즉, JSX를 if 구문 및  for 구문 안에 사용하고, 변수에 할당하고, 인자로 받아들이고, 함수로 반환할수 있다.

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

JSX 속성 정의

태그의 속성으로 문자열 또는 JS 표현식(보간법)을 정의할 수 있다.

const element = <a href="https://www.reactjs.org"> link </a>; // 문자열
const element = <img src={user.avatarUrl}></img>; // 보간법

주의할 점: 동일한 어트리뷰트에 문자열과 보간법 둘 중에 하나만 사용해야 한다.

경고
JSX는 HTML보다 JS에 가까우므로, React DOM은 HTML 어트리뷰트 이름을 camelCase 프로퍼티 명명 규칙을 사용한다.
ex) class => className, tabindex => tabIndex

JSX 자식 정의

빈 태그는 XML과 같이 />로 바로 닫아주어야 한다.

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

JSX 태그는 자식 요소를 포함할 수 있다.

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

주입공격 방지

기본적으로 React Dom은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로,

명시적으로 작성되지 않은 내용은 주입되지 않는다.

모든 항목은 렌더링 되기 전에 문자열로 변환되므로 XSS 공격을 방지할 수 있다.

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;

JSX 컴파일

JSX 문법으로 작성된 코드는 Babel을 통해 순수 JS 파일로 컴파일된다.

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

React.createElement()

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

React.createElement() 는 코드의 버그 검사를 수행하고, 기본적으로 다음과 같은 객체를 생성한다.

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

이러한 객체를 'React 엘리먼트'라고 한다. React에서는 이 객체를 읽어서 DOM을 구성한다.

JSX

위의 React.createElement()는 구조가 복잡해질 수록 구성이 복잡해진다.

JSX를 통하면 다음과 같이 간편하게 사용할 수 있다.

또한, React.createElement()는 구조를 문자열로 작성하므로 오류검출이 어려운데 JSX를 사용하면 오류검출이 쉽다.

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

JSX 문법 정리

1. 최상위 요소가 하나여야 한다.
2. 최사우이 요소를 리턴하는 경우 ( )로 감싸야 한다.
3. 1번의 규칙때문에 여러 자식들을 그대로 렌더링하고 싶으면 <>자식들</>과 같은 방식을 이용한다. Fragment
4. 자바스크립트 표현식을 사용하려면 { 표현식 } 을 이용한다.
5. if 문은 JS 표현식이 아니므로 사용할 수 없다.
   1. 3항 연산자 혹은 &&와 같은 논리 연산자를 사용한다.
6. style을 이용해 인라인 스타일링이 가능하다.
7. class 대신 className을 사용해야 한다.(HTML보다 JS문법에 가까우므로)
8. 태그는 반드시 여닫는 태그가 존재해야 하며, 빈태그는 /를 넣어주어야 한다.
   1. <p> ~~ </p>
   2. <br />