JSX의 정의와 역할 [처음 만난 리액트 #9]

3강. JSX

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

---

JSX란?

● JavaScript를 줄여서 JS라고 많이 표기함 -> JSX는 JavaScript와 연관이 있음 

● A syntax extension to JavaScript 자바스크립트의 확장 문법

● JavaScript + XML/HTML

 

JSX 코드

 

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

 

● 대입연산자 = : 오른쪽에 있는 값을 왼쪽의 변수에 대입하는 역할

● = 왼쪽의 자료형 const와 변수명 element는 흔히 사용하는 JavaScript 문법

● = 오른쪽에는 HTML 코드 (<h1> 태그를 사용하였고 Hello,world!라는 문자열을 값으로 가짐)

 

-> JavaScript 코드와 HTML 코드가 결합되어있는 JSX 코드!

<h1> 태그로 둘러싸인 문자열을 element라는 변수에 저장하는 역할의 코드

 

---

JSX의 역할 

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

실제로 우리가 JSX 코드를 작성해도 최종적으로는 JavaScript 코드가 나오게 되는 것

 

JSX 코드를 JavaScript로 변환하는 역할을 하는 것이 React의 createElement라는 함수 

 

JSX를 사용한 코드

 

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

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

 

● Hello라는 이름을 가진 리액트 컴포넌트가 나오고, 컴포넌트 내부에서 JavaScript 코드와 HTML 코드가 결합된 JSX를 사용하고 있음

● Hello 컴포넌트를 reactDOM에 render 함수를 사용해 실제 화면에 렌더링

 

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

 

JSX 코드를 사용하지 않고 순수한 JavaScript 코드만을 사용해서 위의 코드와 동일한 역할

● Hello 컴포넌트 내부에서 JSX를 사용했던 부분이 React.createElement 함수로 대체

 

=> JSX를 사용하면 리액트에서는 내부적으로 createElement 함수를 사용하도록 변환

최종적으로는 createElement 함수를 호출한 결과로 JavaScript 객체가 나오게 됨 

 

---

JSX를 사용한 코드

 

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

 

JSX를 사용하지 않은 코드

 

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

 

-> JSX를 사용한 코드, 사용하지 않은 코드 모두 동일한 역할

JSX를 사용한 코드도 내부적으로는 createElement 함수를 사용하도록 변환되기 때문

 

createElement 함수 호출의 결과로 아래와 같은 JavaScript 객체가 생성됨

 

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

 

리액트는 이 객체들을 읽어서 DOM을 만드는데 사용하고 항상 최신 상태로 유지

: 이 객체를 element라고 부름 

(createElement 함수는 element를 생성해서 리턴)

 

createElement 함수의 파라미터

 

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

 

● type: element의 유형 (div나 span 같은 HTML 태그가 올 수도 있고, 다른 리액트 컴포넌트가 올 수도 있음)

● props: 속성들

● children: 현재 element가 포함하고 있는 자식 element

 

 

리액트에서 JSX를 쓰는 것이 필수는 아님!

직접 모든 코드를 createElement 함수를 사용해서 개발하면 되기 때문

but JSX를 사용하면 장점들이 많기 때문에 편리함