JSX란 무엇인가?

REACT 공식문서를 토대로 학습한 내용을 정리하기 위해 작성하였다. 빠른 시일내에 공식문서를 익혔으면 좋겠다.

 

JSX(표현식)란 JavaScript에 XML을 추가한 문법이다. 그러므로 JS의 모든 기능이 포함되어 있음. 작성 코드는 브라우저에서 실행되기 전에 번들링 과정에서 바벨을 사용해 일반 JS 형태의 코드로 변환된다. React에서는 본질적으로 렌더링 로직이 UI로직과 연결된다.

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

JSX 문법규칙

1. 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

function App() {
  return(
    <div>
      <h1>Hello</h1>
      <h2>is it working?</h2>
    </div>
  )
}

virtual DOM에서 컴포넌트 변화를 감지할때 효율적인 비교를 위해 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 존재하기 때문이다.

2. JSX가 내부에서 코드를 { }로 감싸면 JS표현식을 작성할 수 있다.

• <div>{title}</div>
  
  

3. 조건부 연산자

• if문과 for 루프는 JS표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.
• 때문에 조건부에 따라 JSX주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자를 사용한다.
  
  

방법 1. {}외부에서 사용

function App() {
  let desc = '';
  const loginYn = 'Y';
  if(loginYn === 'Y') {
    desc = <div>ShinJoongHo 입니다.</div>;
  } else {
    desc = <div>비회원 입니다.</div>;
  }
  return (
    <>
      {desc}
    </>
  )
}

방법 2. {}내부에서 삼항연산자 사용

function App() {
  const loginYn = 'Y';
  return (
    <>
      <div>
        {loginYn === 'Y' ? (
          <div>ShinJoongHo 입니다.</div>
        ) : (
          <div>비회원 입니다.</div>
        )}
      </div>
    </>
  );
}

방법 3. AND연산자(&&)시용

function App() {
  const loginYn = 'Y';
  return (
    <>
      <div>
        {loginYn === 'Y' && <div>ShinJoongHo 입니다.</div>}
      </div>
    </>
  );
}

JSX는 주입 공격을 방지한다.

const element = <h1>{title}</h1>

기본적으로 react DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프(특정 문자를 HTML로 변환하는 행위)하므로, 작성되지 않은 내용은 주입되지 않는다. 즉 모든 항목은 렌더링 전에 문자열로 변환되므로 XSS공격을 방지한다.

• 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: 'Hello, world!'
  }
};

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