JSX 란?

<목차>

1. JSX 란?

2. JSX 의 역할

3. JSX의 장점

4. JSX의 사용법

 

---

 

1. JSX란?

 

' Syntax extension to JavaScript ' 로 자바스크립트의 확장 문법

 

 

Q. 문법을 어떻게 확장 시킨 것인가?

A. JSX는 JavaScript와 XML/HTML 을 합친것

 

ex. 

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

 

에서

<h1>Hello, world!</h1>

부분이 자바스크립트와 HTML 코드가 결합되어 있는 JSX코드이다.

 

---

 

2. JSX의 역할

 

' 코드가 더욱 간결해지고 생산성과 가독성을 올리는 역할 ' 

 

즉, JSX를 쓰지 않더라도 가능하지만 더욱 효율적으로 사용하기 위해서 JSX를 쓴다!

 

---

Q. 그렇다면 JSX를 쓰지 않는다면 어떻게 될까?

사실 JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거친다. 그렇기 떄문에 실제로 JSX로 코드를 작성해도 최종적으로는 자바스크립트로 코드가 나오게 된다.

이 말은 JSX를 사용하지 않고 순수자바스크립트로 코드를 짜게 되면 '자바스크립트로 변환하는 과정'을 한번 더 거쳐야 한다는 것이다.

 

결과로는 자바스크립트 코드로 나와야하므로,

순수 자바스크립트 코드에서 JSX코드를 자바스크립트로 변환하는 함수가 필요하고 이 함수가 createElement( ) 이다.

 

밑의 내용은 다음을 정리한 내용이다. 

 

---

 

1) JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거침.

그렇기 때문에 실제로 JSX 로 코드를 작성해도 최종적으로는 자바스크립트 코드가 나옴.

 

---

 

2) createElement() 함수  : JSX 코드를 자바스크립트 코드로 변환하는 역할

 

(A) JSX로만 작성된 코드

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

ReactDom.render(
	<Hello toWhat="World" />
    document.getElementById('root')
);

 

ReactDom.render() : React 컴포넌트를 특정 DOM 요소에 랜더링 함.

 

 

(B) 순수 자바스크립트 코드만을 사용하여 작성된 코드

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 컴포넌트 내부에서 JSX를 사용했던 부분이 React.createElement( ) 라는 함수로 대체 됨.

JSX 문법을 사용하면 리액트에서 내부적으로 모두 createElement 라는 함수를 사용하도록 변환됨.

최종적으로는 이 createElement ( ) 함수를 호출한 결과로 자바스크립트 객체가 나오게 됨.

---

(A) JSX를 사용한 코드

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

 

 

(B) JSX를 사용하지 않은 코드

const element=React.createElement(
	'h1',
    {className:'greeting'},
    'Hello, world!'
)

 

- JSX 를 사용한 코드도 내부적으로는 createElement() 함수를 사용하도록 변환됨.

 

---

3) element(앨리먼트)

 

- createElement( ) 함수의 호출 결과로 아래의 자바스크립트 객체가 나오게 되는데, 리엑트에서는 이 객체를 앨리먼트라고 한다.

 

const element={
	type:'h1',
    props:{
    	className:'greeting',
        children:'Hello, world!'
    }
}

 

Q. createElement() 함수의 파라미터는?

React.createElement(
	type,
    [props],
    [...childern]
)

 

A. type, props, childern 3가지가 있다.

 

1) 앨리먼트의 유형 (type)

       HTML 태그 : <div>, <span> or 다른 리액트 컴포넌트 들어갈 수 있음 

2) props

3) childern  

      children 이란 현재 앨리먼트가 포함하고 있는 자식 엘리먼트