React JSX 정의와 역할

■ React  JSX 정의와 역할

- JSX(A syntax extension to JavaScript)란?

자바스크립트의 확장 문법으로 JavaScript + XML / HTML을 합친 것이다.

// JSX 예제 코드
const element = <h1>Hello, world!</h1>

# 위 코드는 자바스크립트 코드와 html 코드가 결합되어 있는 JSX 코드가 된다.

# h1태그로 둘러싸인 문자열을 element 변수에 대입하는 역할을 한다.

---

■ JSX의 역할

JSX는 내부적으로 XML, HTML 코드를 JavaScript로 변환하는 과정을 거치게 되며,

실제로 JSX 코드를 작성해도 최종적으로는 JavaScript 코드가 나오게 된다.

 

여기서 JSX 코드를 JavaScript 코드로 변환하는 역할을 하는 것이

React의 createElement 라는 함수다.

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

---

- JSX를 사용한 코드

 

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

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

# hello라는 이름을 가진 React 컴포넌트가 나오고 컴포넌트 내부에서 JavaScript 코드와 HTML 코드가 결합된 JSX를 사용

   이후 React DOM 랜더 함수를 사용해서 실제 화면에 랜더링

---

- JSX를 사용하지 않은 코드

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')
);

# JavaScript 코드만 사용해서 위 코드와 동일한 역할을 하게 만든 코드

---

 

# 두 코드 모두 동일한 역할을 한다.

 

 

# React는 이 객체들을 읽어서 DOM을 만다는데 사용하고 항상 최신 상태로 유지한다.

---

- createElement 함수의 파라미터는?

1.  첫 번째 파라미터는 엘리먼트의 유형, 타입을 나타낸다.
   이 유형으로는 div나 span 같은 html 태그가 올 수 있고 다른 React 컴포넌트가 들어갈 수 있다.
2. 두 번째 파라미터는 props가 들어간다.
   속성들이 들어간다고 기억!
   
   
3. 세 번째 파라미터로는 children이 들어간다.
   children이란 현재 엘리먼트가 포함하고 있는 자식 엘리먼트다.

※ React에서 JSX를 사용하는 것은 필수가 아니다!
    하지만 JSX를 사용했을 때 코드가 간결해지고 생산성과 가독성이 올라가기 때문에 사용하는 것을 권장