JSX의 장점 및 사용법

1. JSX의 장점 

ⓐ 간결해진 코드 > 높은 가독성 > 오류 잡기 쉬움

저번 포스팅에서 말했듯이, JSX를 쓰면 하나의 JSX 코드 내에서 JS와 HTML 코드를 혼용해서 사용할 수 있었다. 이는, JS 로직과 그것을 연결하려고 하는 HTML 요소를 특정하는 로직을 한번 더 작성할 필요가 없기 때문에 코드가 짧아지고, 간결해진다. 이는 엄청난 장점이다. 

ⓑ Injection attack 해킹 방어에 용이 

이건 그렇게 와닿는 내용이 아니라서 깊게 듣지는 않았다. JSX를 쓰면 해당 주입성 공격을 방어하기 더 용이하다고 한다. 

 

2. JSX 사용법

ⓐ HTML 요소를 하나의 JS 변수로 사용한다. 

const element1 = <h1> Hello World!! </h1>

요렇게 하나의 요소를 변수로 특정이 가능하다. 당연히 해당 Element 요소는 안에 자식 태그를 가질 수 있다. 

ⓑ HTML 요소 안에 JS 함수나 변수를 넣고 싶은 경우, {} 중괄호를 사용한다.

const title = response.potetiallyMaliciousInput;

const element = <h1>{title} </h1>

이러면 태그 밖의 변수를 사용할 수 있다. 함수도 가능하다. 

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

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

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

ⓒ 만약 태그의 속성으로 JS 값을 넣고 싶을 시, 문자열 형태로 넣거나 {} 중괄호를 사용하면 된다. 

// 단순한 값을 집어넣을 때,
const element = <div tabIndex="0"></div>;

// 특정 함수나 변수 값을 집어넣을 때,
const element = <img src={user.avatarUrl}></img>