JSX의 장점 및 사용법 [처음 만난 리액트 #10]

3강. JSX

[무료] 처음 만난 리액트(React) - 인프런 | 강의

리액트로 개발할 때 JSX를 사용하는 것은 필수는 아니지만, JSX를 사용했을 때 얻을 수 있는 장점이 많기 때문에 사용하는 것을 권장함

---

JSX의 장점

장점1. 코드의 간결성

 

JSX 사용함

 

<div>Hello, {name}</div>

 

HTML의 div 태그를  사용해서 name이라는 변수가 들어간 인사말을 표현

 

=

JSX 사용 안함 

 

React.createElement('div', null, 'Hello, ${name}');

 

React의 createElement 함수를 사용하여 동일한 작업을 수행 (type, props, children이라는 createElement의 파라미터들을 사용)

위의 두 개의 코드는 동일한 역할을 하지만, JSX를 사용한 코드가 더 간결함

 

장점2. 가독성 향상

JSX를 사용한 코드가 그렇지 않은 코드에 비해 코드의 의미가 더욱 빠르게 와닿음

가독성은 코드를 작성할 때 뿐만 아니라, 유지보수 관점에서도 매우 중요

가독성이 높을수록 코드 상에 존재하는 버그를 발견하기 쉬움

 

장점3. Injection Attacks 방어

Injection Attacks라는 해킹 방법을 방어함으로써 보안성이 높아짐

● Injection Attacks: 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 방법

ex) ID를 입력하는 입력창에 JavaScript 코드를 넣었는데, 그 코드가 그대로 실행되어 버리면 큰 문제가 생김

 

const title = response.potentiallyMaliciousInput;

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

 

● title이라는 변수에 잠재적으로 보안 위험 가능성이 있는 코드가 삽입

● 아래의 JSX 코드에서는 괄호를 사용해 title 변수를 삽입(embedding)하고 있음 

 

리액트 DOM은 렌더링하기 전에 embedding된 값을 모두 문자열로 변환

따라서 명시적으로 선언되지 않은 값은 XSS(Cross Site Scripting) Attack을 방어할 수 있음 

 

---

JSX 사용법

● JSX : JavaScript 코드 + XML/HTML

● JSX는 기본적으로 JavaScript 문법을 확장시킨 것이기 때문에 모든 JavaScript 문법을 지원, 추가로 XML과 HTML을 섞어서 사용하면 됨

 

const name = '히소';
const element = <h1>안녕, {name}</h1>;

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

 

element 선언하는 코드 (const element = <h1>안녕, {name}</h1>;) 처럼 html과 JavaScript가 섞인 형태로 코드를 작성하면 됨

 

 

··· XML/HTML

{JavaScript 코드}

··· XML/HTML

 

● XML/HTML 코드를 사용하다가 중간에 JavaScript 코드를 사용하고 싶다면 중괄호를 써서 사용하면 됨

● 위의 element 선언 코드에서 {name} : name이라는 JavaScript 변수를 참조하기 위해서 중괄호를 사용한 것

 

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

const user = {
    firstName: 'Inje',
    lastNameL 'Lee'
};

const element = (
    <h1>
        Hello, {formatUser(user)}
    </h1>
);

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

 

HTML 코드 사이에 괄호를 사용해서 변수가 아닌, formatUser라는 JavaScript 함수를 호출

 

funtion getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>
}

 

JSX를 사용해서 사용자 이름에 따라 다른 인사말을 사용하도록 만든 컴포넌트 

사용자가 존재하면 formatName 이라는 함수를 써서 formating된 이름을 출력하고, 그렇지 않다면 Stranger에게 하는 인사말을 출력

 

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

// 큰 따옴표 사이에 문자열을 넣거나
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이 정의됨

div 태그의 children은 h1 태그와 h2 태그