[React] - JSX

아래 내용은 React Document 를 바탕으로 만들어졌다.

JSX

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

JavaScript 를 확장한 문법.

JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다.

const name = "ddingg"
const element = <h1> hello {name}</h1>

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

• JSX의 중괄호 안에는 모든 JavaScript문법을 넣을 수 있다

• 자동 세미콜론 삽입을 방지하기 위해 괄호 안에서 작업하는걸 추천한다.

  • return 
        <h1> 
            TEST 
        </h1>
    
    // ... Transform to
    
    return;
        <h1>;
            TEST;
        </h1>;
    
    // 따라서 괄호 안에서 작업해야 한다.
    
    return (
        <h1>
            TEST
        </h1>
        );

JSX 속성 정의

JSX는 따옴표를 이용해 속성(문자열 리터럴)을 정의할 수 있다.

JSX는 HTML보다 JavaScript에 가깝기 때문에 프로퍼티를 정의할때 camelCase 명명 규칙을 사용한다.

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

const element2 = <img stc={user.avatarUrl}></img>;

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

XSS (cross-site-scripting) 이란?

• 클라이언트(사용자) 를 대상으로 한 공격이다.
• 사용자의 입력폼에 악성 스크립트를 입력해 렌더링을 할 때 스크립트가 실행되는 공격 방식이다.
• 이 취약점은 사용자로부터 입력받은 값을 제대로 검사하지 않고 사용할 경우 나타난다.

• 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링 하기 이전에 이스케이프 하므로 코드에서 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 항목은 렌더링 하기 이전에 문자열로 변환되기 때문이다.
  • 이스케이프란, Java를 예로 들면 " 를 문자열로 인식 시키기 위해 \" 로 표현하는 것 처럼, HTML도 < 등 구문으로 분리되는 문자들을 텍스트로 인식 시키기 위해 &lt 처럼 작성하는 방법을 말한다.
• 이런 특성으로 React DOM은 기본적으로 XSS 공격을 방지한다.

다음 두 내용은 동일하다.

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

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

Tip.

ES6 및 JSX 코드가 올바르게 표시되도록 편집기에 “Babel” 언어 설정을 사용하는 것을 권장합니다.

아래 내용은 React Document 를 바탕으로 만들어졌다.

JSX

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

JavaScript 를 확장한 문법.

JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다.

const name = "ddingg"
const element = <h1> hello {name}</h1>

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

• JSX의 중괄호 안에는 모든 JavaScript문법을 넣을 수 있다

• 자동 세미콜론 삽입을 방지하기 위해 괄호 안에서 작업하는걸 추천한다.

  • return 
        <h1> 
            TEST 
        </h1>
    
    // ... Transform to
    
    return;
        <h1>;
            TEST;
        </h1>;
    
    // 따라서 괄호 안에서 작업해야 한다.
    
    return (
        <h1>
            TEST
        </h1>
        );

JSX 속성 정의

JSX는 따옴표를 이용해 속성(문자열 리터럴)을 정의할 수 있다.

JSX는 HTML보다 JavaScript에 가깝기 때문에 프로퍼티를 정의할때 camelCase 명명 규칙을 사용한다.

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

const element2 = <img stc={user.avatarUrl}></img>;

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

XSS (cross-site-scripting) 이란?

• 클라이언트(사용자) 를 대상으로 한 공격이다.
• 사용자의 입력폼에 악성 스크립트를 입력해 렌더링을 할 때 스크립트가 실행되는 공격 방식이다.
• 이 취약점은 사용자로부터 입력받은 값을 제대로 검사하지 않고 사용할 경우 나타난다.

• 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링 하기 이전에 이스케이프 하므로 코드에서 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 항목은 렌더링 하기 이전에 문자열로 변환되기 때문이다.
  • 이스케이프란, Java를 예로 들면 " 를 문자열로 인식 시키기 위해 \" 로 표현하는 것 처럼, HTML도 < 등 구문으로 분리되는 문자들을 텍스트로 인식 시키기 위해 &lt 처럼 작성하는 방법을 말한다.
• 이런 특성으로 React DOM은 기본적으로 XSS 공격을 방지한다.

다음 두 내용은 동일하다.

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

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

Tip.

ES6 및 JSX 코드가 올바르게 표시되도록 편집기에 “Babel” 언어 설정을 사용하는 것을 권장합니다.