[React] 리액트에서 사용하는 JSX

✏ React에서 자주 사용하게될 JSX에 대해 알아보려고 한다.

1. JSX란?

A syntax extension to JavaScript(=자바스크립트의 확장 문법)

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

• JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
• JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
• 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.

2. JSX 변환 과정

React.createElement(): JSX코드를 JavaScript코드로 변환하는 함수

//JSX를 사용한 코드
const element = (
    <h1 className="greeting">
        Hello, world~!
    </h1>
)

//JSX를 사용하지 않은 코드
const element = React.createElement(
    'h1',
    { className: 'greeting' },
    'Hello, world~!'
)

⬜ React.createElement() 함수의 파라미터

우선 이 함수는 3가지의 파라미터를 가진다. 순서대로 type, props, children 이다. 이를 예를 들어서 설명하면 아래와 같다.

React.createElement(
    type,//엘리먼트의 유형,타입(div, span 등)
    [props],//props..속성
    [...children]//현재 엘리먼트가 포함하고 있는 자식 엘리먼트 
)

📍 리액트에서 JSX를 사용하는 것이 필수는 아님(React.createElement사용하면 됨) 그러나 JSX를 사용했을때 코드의 간결성과, 가독성, 생산성 등이 좋기 때문에 사용을 권장!

3. JSX의 장점

1. 코드의 간결성
2. 가독성 향상(버그 또한 발견하기 쉬움)

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

//JSX 사용 안함
React.createElement('div', null, `Hello, ${name}`);//type, props, element

3. 보안성 향상(Injection Attacks 방어)

   injection attack 이란?
   입력창에 문자, 숫자가 아닌 소스코드를 입력하여 해당 코드가 실행되게 하는 해킹방법
   ㅤ
   기본적으로 ReactDOM 은 렌더링 하기 전에 임베딩할 값들을 모두 문자열로 변환한다. -> XSS 공격 방어 가능.

4. JSX 기본 사용법

⬜ Javascript 코드 + XML/HTML

xml/html코드를 사용하다 중간에 자바스크립트 코드를 사용하고 싶으면 중괄호를 써서 묶어주면 된다.

const name = '리액트';
const element = <h1>안녕하세요, {name}</h1>;//html + javascript

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

⬜ 태그의 속성(attribute)에 값을 넣는 방법

html의 중간이 아닌 태그의 속성에 값을 넣고 싶을땐 큰따옴표 사이에 문자열을 넣거나 중괄호 사이에 자바스크립트 코드를 넣으면 된다.

//큰따옴표 사이
const element = <div tabIndex="0"></div>;

//중괄호 사이
const element = <img src={user.avatarUrl}></img>

💡 JSX에서 중괄호는 사용한다? -> 자바스크립트 코드가 들어간다~~!!

⬜ 자식(children)을 정의하는 방법

const element = (
    <div>
        <h1>안녕하세요</h1>
        <h2>리액트 공부를 하고 있습니다!</h2>
    </div>
)

평소 html 사용하듯이 상위태그가 하위태그를 감싸도록 하면 자식(children)이 정의된다.