JSX

JSX란?

 

A syntax extension to Javascript
자바스크립트의 확장 문법
Javascript + XML / HTML

 

JSX 예제 코드

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

 

 

JSX의 역할

내부적으로 XML, HTML 코드를 Javscript로 변환하는 과정이 발생

결과적으로 Javscript 코드가 나옴

이 변환 과정을 하는것이 React의 createElement함수이다.

React.createElement(
    type, // div, span등의 html태그 혹은 다른 React Component
    [props],
    [...children] // element가 포함하는 자식 element
)

 

JSX 사용 코드

class Hello extends React.Component {
    render() {
        return <div>Hello {this.props.toWhat}</div>
    }
}

ReactDOM.render(
    <hello toWhat="World" />,
    document.getElementById('root')
);

 

JSX를 사용하지 않은 코드

class Hello extends React.Component {
    render() {
    	// 내부적으로 React.createElement 함수사용 
        return React.createElement('div', null, `Hello ${this.props.toWhat}`);
    }
}

ReactDOM.render(
    // 내부적으로 React.createElement 함수사용 
    React.createElement(Hello, { toWhat: 'World' }, null),
    document.getElementById('root')
);

 

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

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

 

---

JSX의 장점

1. 간결한 코드

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

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

 

2. 가독성 향상 (디버깅 용이)

 

3. Injection Attacks 방어

const title = response.potentiallyMaliciousInput;

// 이 코드는 안전합니다.
const element = <h1>{title}</h1>

/*
React DOM은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환
고로 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다.
결과적으로 XSS라 불리는 크로스 사이트 스크립팅 어택을 방어할 수 있다.
*/

---

JSX사용법

Javascript + XML / HTML이므로 모든 javascript 문법을 지원하고 추가로 XML과 HTML을 섞어서 사용하면 됨.

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

const name = 'devjun';
const element = <h1>안녕, {name}</h1> // 선언 변수 사용

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

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Dev',
    lastName: 'Jun'
};

const element = (
    <h1>
        Hello, {formatUser(user)} // javascript function 사용 가능
    </h1>
);

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

 

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

// 큰따옴표 사이에 문자열을 넣거나
const element = <div tabIndex="0"></div>

// 중괄호 사이에 자바스크립트 코드를 넣으면 됨
const element = <img src={user.avatarUrl}></img>

 

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

const element = (
    <div>
    	// h1, h2 태그는 div의 자식
        <h1>안녕하세요</h1>
        <h2>열심히 리액트를 공부해 봅시다!</h2>
    </div>
);

 

---

Referenced By

 

인프런 - 처음 만난 리액트(React)

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런