[React] JSX란?

JSX - 자바스크립트를 확장한 문법

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

- JSX에 표현식 포함

  const name = 'Jeseong Lee';
  const element = <h1>Hello, {name}</h1>; 

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

=> JSX의 중괄호 안에 유효한 JavaScript 표현식을 넣을 수 있음

- JSX는 표현식

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

=> JSX 표현식은 JavaScript 객체로 처리됨

- JSX로 속성 정의

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

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

=> 따옴표를 사용하여 문자열 리터럴을 속성으로 지정할 수 있습니다.
=> 중괄호를 사용하여 속성에 JavaScript 표현식을 포함 할 수도 있습니다
=> HTML보다 JavaScript에 더 가까우므로 React DOM은 HTML 속성 이름 대신 camelCasef 속성 이름 지정 규칙 사용

* camelCase - 첫 번째 단어를 제외하고 복합어에서 각 단어의 첫 글자가 대문자로 표시되는 명명 규칙
* DOM - 웹페이지를 자바스크립트로 제어하기 위한 객체 모델

 

- JSX로 자식 정의

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

=> JSX 태그에는 하위 항목이 포함될 수 있습니다.

- 인젝션 공격을 방지
=> React DOM은 JSX에 포함 된 모든 값을 렌더링하기 전에 이스케이프합니다.
=> 모든 것이 렌더링되기 전에 문자열로 변환됩니다.
=> 따라서 애플리케이션에 명시 적으로 작성되지 않은 것은 절대 주입 할 수 없습니다.

escape ex)

before

<h1>Hi there!</h1>

after

<h1>Hi there!</h1>

- JSX는 객체를 나타냄

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

위의 코드는 아래 코드와 같이 처리됨

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

위의 코드들은 아래의 객체처럼 생성됨 ( 상세 내용은 다름 )

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