JSX란(장점, 사용법 등..)

1.JSX란?

 

JSX는 JavaScript의 확장 문법으로 JavaScript와 XML/HTML이 합친 것입니다.

①XML이란?

데이터를 교환하기 위한 Markup 언어이다.

 

JSX 문법을 적용한 간단한 코드입니다. 

const element = <h1>Hello</h1>;

'const element = ' 는 JAVASCRIPT 문법이며, <h1>Hello</h1> 코드는 html 에서 쓰는 코드입니다.

이렇게 JavaScript와 html/xml 문법이 결합된 것입니다.

 

2.JSX의 역할

JSX는 내부적으로는 JavaScript로 변형 됩니다.

여기서, JavaScript로 변형 시키는 것이, createElement 함수입니다.

 

하기 코드는 JSX를 쓴 코드와 쓰지 않은 코드가 있습니다.

//jsx를 쓴 코드
const element1 = (
    <h1 className="greeting">
        Hello, World!
    </h1>
)

//jsx를 쓰지 않은 코드
const element = React createElement(
    'h1',
    {className: 'greeting' },
    'Hello, world!'
)

 

리엑트에서 JSX를 쓰는 것은 필수는 아닙니다.

 

위 코드 처럼 createElement를 쓰면 되지만, JSX를 쓸 때 코드가 간결하고 쉽게 읽히기 때문에 권장을 하고 있습니다.

3. JSX의 장점

// JSX 사용함
 <div>Hello, {a}</div>

//JSX 사용 안함
React.createElement('div', null, 'Hello, ${a}');

• 간결한 코드
• 가독성 향상( 버그를 발견하기 쉽습다 )
• Injection Attacks 방어해서 보안성 강화 

① Injection Attacks이란?

소스 코드를 입력하여 해당 코드가 실행되게 만드는, 해킹 방법입니다.

 

4.JSX사용법

• JavaScript의 모든 문법은 지원하며, XML/HTML의 섞어서 사용하면 됩니다.

........XML/HTML
{JavaScript 코드}
...........XML/HTML

 

위 코드 블록 처럼, XML이나 HTML 코드를 쓴 후 {}에 JavaScript를 쓰면 됩니다.

 

하기 링크는 리엑트를 공부하면서 배운 코드를 모아놓은 GIT 사이트입니다.

GitHub - do04200611/react: https://do04200611.github.io/react/