02. JSX 란

JSX란?

A syntax extension to JavaScript 라는 의미를 가지고 있으며 문장을 해석해 보면 '자바스크립트의 확장문법' 이라는 뜻이다.

JSX 는 JavaScript와 XML/HTML 을 합친 것이라고 보면 된다.

 

 

JSX의 역할

JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거치므로 JSX로 코드를 작성하면 최종적으로는 자바스크립트 코드가 나오게 된다.

 

여기서 JSX코드를 자바스크립트로 변환하는 역할을 수행하는 것이 리액트의 createElement() 라는 함수이다.

 

다음과 같이 index.js 파일을 수정해 보자.

 

class Hello extends React.Component{
	render(){
		return <div> Hello {this.props.toWhat}</div>
	}
}
ReactDOM.render(
	<Hello toWhat="World" />,
	document.getElementById('root')
)

위의 코드는 ReactDom 의 render 을 이용하여 실제 화면에 렌더링 하고 있다.

그렇다면 다음을 확인해 보자.

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

`Hello ${this.props.toWhat}` 에서 작은 따옴표가 아님을 주의 한다.

두 코드를 비교해 보면 Hello 컴포넌트 내부에서 JSX를 사용했던 부분을 아래에서 createElemnet 함수를 사용한 것을 확인 할 수 있다.

createElemnet() 함수를 사용하면 위와 같은 자바스크립트 객체가 나오게 된다.

 

 

JSX의 장점

JSX를 사용할 때

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

JSX를 사용하지 않을 때

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

1. 위와 같이 코드가 간결해 진다.

2. 가독성이 향상된다(위의 코드를 보면 바로 의미를 확인 할 수 있다.

3. Injection Attack라 불리는 해킹방법을 방어함으로 보안성 향상 된다.

 

JSX의 사용법

모든 자바스크립트 문법에 XML과 HTML을 섞어서 사용하면 된다.

다음의 예를 살펴 보자.

const name = '홍길동';
const element = <h1> {name} 안녕!</h1>;

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

위와 같이 XML/HTML 코드를 사용하다가 중간에 자바스크립트 코드를 사용하고 싶으면 중괄호를 써서 묶어 주기만 하면 된다.

 

다음과 같이 사용할 수도 있다.

function getName(person){
	return person.firstName + ' ' + person.lastName;
}

const person={
	firstName : '홍',
	lastName : '길동'
}

const element = <h1> {getName(person)} 안녕!</h1>;

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

위와 같이 중괄호 사이에 getName() 이라는 함수를 호출하여 사용했다.

 

 

참고

소플의 처음 만난 리액트