React - JSX

JSX

• 비공식 자바 스크립트의 확장 문법이다.
• JavaScript 코드와 XML / HTML 코드가 결합되어 있는 형태를 가진다.
• 내부적으로 XML/ HTML 코드를 자바스크립트 코드로 변환하는 과정을 거친다.
• 따라서 개발자가 JSX 코드로 작성을 해도 최종적으로는 자바스크립트 코드로 변환된다.
• 리액트로 프로젝트를 개발할 때 사용한다.
• React의 element를 생성한다는 말과 같은 말이다.

 

 

JSX 문법

const name = 'world';
const element = <h1>Hello, {name}</h1>;

• JSX 안에서도 자바스크립트 표현식을 사용할 수 있다.
• 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸주면 된다.

 

function App() {
	return (
    	<>
        	<div>Hello!</div>
            <div>World!</div>
        </>
    );
}

• 반드시 부모 요소 하나가 감싸는 형태여야 한다.
• Virtual DOM에서 컴포넌트의 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져 있어야 한다는 규칙이 있기 때문이다.

 

JSX를 사용한 코드

class Hello extends React.Component {
	render() {
    	return <div>Hello {this.props.toWhat}</div> // JSX를 사용한 부분
    }
}

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

• JSX를 사용한 코드를 ReactDOM의 render 함수를 이용하여 실제 화면에 렌더링 하고 있다.

 

자바스크립트만으로 이루어진 코드

class Hello extends React.Component {
	render() {
    	return React.createElement('div', null, 'Hello ${this.props.toWhat}'); 
        // JSX -> creatElement
    }
}

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

• JSX 문법을 사용하면 React에서는 내부적으로 모두 createElement()라는 함수를 사용하도록 변환한다. 
• 그리고 최종적으로는 createElement() 함수의 결과로 자바스크립트 객체가 생성된다.
• React는 이 객체를 읽어 DOM을 만드는 데 사용하고 항상 최신상태를 유지하려고 한다.
• 리액트에서는 이 객체를 Element라고 한다.
• 따라서 리액트에서 JSX를 사용하는 것이 필수는 아니다. 결국 createElement() 함수를 사용하는 코드로 변환되기 때문이다. 그러나 JSX를 사용하면 코드가 간결해져 생산성과 가독성이 올라가기 때문에 사용하는 것을 권장한다.

 

 

장점

return <div>Hello, {name}</div> // JSX 사용
return React.createElement('div', null, 'Hello, ${name}'); // JSX 사용 안함

• 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
• 코드가 간결해진다.
• 가독성이 향상된다.
• 유지보수성이 올라가고 버그를 발견하기 쉽다.

 

const title = response.potentiallyMaliciousInput;

// 이 코드는 안전합니다.
const element = <h1>{title}</h1>;

• Injection Attacks 방어가 가능하다.
• 위 코드는 title이라는 변수에 잠재적으로 보안 위험 가능성이 있는 코드가 들어가 있다.
• 그런데 JSX 코드에서는 중괄호를 사용해 title 변수를 삽입하고 있다.(embedding)
• 괄호 안에는 자바스크립트 코드가 들어간다고 생각하는 게 편하다.
• 기본적으로 ReactDOM은 렌더링 전에 임베디드 된 값을 문자열로 변환한다.
• 그래서 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다.
• 이는 XSS(Cross-Site Scripting) 공격을 방어할 수 있게 한다.

 

 

 

참고

인프런 - 처음 만난 리액트

https://goddaehee.tistory.com/296