[React] JSX

React 프로젝트 시에는 일반적인 Javascript 코드보다 JSX가 선호되어 사용된다. JSX 란 무엇인가??

 

JSX 는 JavaScript and XML 를 줄인단어이다. JSX의 의미는 A syntax extension to Javascript, 즉 Javascript 의 확장 문법이다. Javascript 의 확장 문법으로써 Javascript 와 XML/HTML 을 합친 것으로 보면 된다. 

 

 

간단한 JSX

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

h1 이라는 HTML 태그을 Javascript 변수에 저장하고 있다.

 

 

Javascript 코드와 JSX 코드 비교하기

다음 아래의 코드들은 같은 기능을 하고 있다.

 

1. Javascript 문법

const element = React.createEelement(
    'h1', // type
    {className : 'greeting'}, // props (properties)
    'Hello, world!'
)

 

2. JSX 문법

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

JSX를 사용하는 코드도 내부적으로는 React.createElement 함수를 사용하고 있다. 또한 React.createElement 함수는 Javascript Object 를 반환한다. React 에서는 이를 Element 라고 부른다

 

 

JSX 의 장점

React를 통한 개발시 반드시 JSX가 강제되는 것은 아니지만, JSX를 통해 얻는 장점이 많으므로 JSX가 권장된다.

 

• 코드가 간결해진다.
• 가독성이 향상되어 유지보수성이 좋아진다.
• Injection Attack 에 대한 보안이 높아진다.

* Injection Attack : 입력창에 소스코드를 입력하여 해당 코드가 실행되도록 하는 공격기법

    - ReactDOM 은 렌더링 하기 전에 임베딩(삽입)된 값을 모두 문자열로 변환하기 때문에 명시적으로 선언되지 않은 값은        코드안의 변수값으로 할당될 수 없기에 XSS 등 해킹공격을 막을 수 있다. 

 

 

JSX 사용하기

• 기본적으로 모든 Javascript 문법을 지원.
• XML/HTML 코드 안에 Javascript 문법을 사용하기 위해서는 중괄호 { } 사용.

const formatName = (name) = {
    return name.first + " " + name.last;
};

const name = {
    first: pogle,
    last: J
};

const element = (
    <h1>Hello, {formatName(name)},</h1> // { JS함수(JS객체) }
    <h1>{`Hello, ${formatName(name)`}</h1> // 위코드와 같은기능 
);

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