🌌 React 입문 03 - JSX 문법

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다.

JSX란?

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

• JSX는 자바스크립트를 확장한 문법으로, JavaScript eXtension을 의미한다.
• 상기 코드와 같이 자바스크립트와 XML, HTML을 합친 것이라고 보면 된다.
• JSX 문법을 사용하면 Component 내부에서 createElement() 메서드로 대체된다.

// JS
const element1 = React.createElement('h1', {className: 'greeting'}, 'Hello, world! ${name}'});

// JSX
const element2 = <h1 className="greeting">Hello, world! {name}</h1>;

/*
element = {
    type: 'h1',
    props: {
        className: 'greeting'
        children: 'Hello, world!'
    }
}
*/
console.log(element1);
console.log(element2);

• 가령 위 코드에서 element1과 element2를 콘솔 로그로 출력하면 같은 결과가 나온다.
• 이처럼 React.createElement() 함수를 바로 사용해도 되기 때문에 JSX 문법이 필수는 아니다.
• 참고로 JSX에서는 중괄호를 사용하면 무조건 Javascript 코드가 들어간다고 할 수 있다.

 JSX 왜 써야 할까?

✅ 코드 가독성 향상

•  JSX 문법을 사용하면 코드가 간결해진다.
• 이는 코드 가독성을 향상 시킨다.

✅ 보안 확보

• Injection Attack 해킹 공격을 방어함으로써 코드의 보안을 확보할 수 있다.
• 리액트는 기본적으로 렌더링 하기 전에 임베딩된 값을 문자열로 변환하는 과정을 거치기 때문에 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없다.
• 결과적으로 이것은 XSS라 불리는 Cross-site-scripting Attacks 공격을 방어할 수 있다.

const input = response.cross_site_scripting_attacks_code;
const element = <h1>{input}</h1>;

• 위 코드에서 input에 Javascript 코드가 있다고 하더라도 문자열로 변환하기 때문에 해당 코드는 실행되지 않는다.

실습

import React from "react";

function Member(props) {
	return (
		<div>
			<h3>{`😆 멤버의 이름은 ${props.name}입니다.`}</h3>
			<h4>{`✅ ${props.name}님은 총 ${props.numOfProject}개의 프로젝트를 진행하고 있습니다.`}</h4>
			<br/>
		</div>
	);
}

function Team() {
    return (
    <div>
	    <Member name="김진형" numOfProject={3} />
	    <Member name="박○○" numOfProject={4} />
	    <Member name="윤□□" numOfProject={5} />
	    </div>
	);
}

export default Team;

• 문자열에 동적인 값을 넣으려면 ${}로 감싼 후 백틱으로 한번 더 감싸야 한다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Team from './Team';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<React.StrictMode>
		<Team/>
	</React.StrictMode>
);

reportWebVitals();

• index.js에 작성한 Team Component를 넣으면 된다.

회고

• 책을 읽을 때는 이해가 된 것 같았는데, 실제 프로젝트에 적용하려니 생각처럼 되지 않았다.
• 책을 읽으면서 실습하는 것도 중요하지만 실제로 적용할 때 많은 공부가 되는 것 같다.