리액트 React | JSX와 Babel: JavaScript의 확장된 문법과 변환 도구

 

✅ JSX, JavaScript XML

https://velog.io/@hskwon517

JSX는 리액트에서 사용되는 자바스크립트의 확장 문법입니다. 이를 통해 XML과 유사한 형태로 UI를 작성할 수 있습니다. JSX는 리액트 컴포넌트 파일에서 UI를 표현하는 데 주로 사용됩니다.

---

JSX는 XML과 비슷한 구문으로 UI 구성 요소를 작성하며, 자바스크립트 코드 내에서 시각적으로 UI를 표현하는 데 도움을 줍니다. 개발자들은 주로 JSX를 활용하여 UI를 작성하고 유지보수하는 것을 선호합니다.

---

.JSX 코드를 브라우저에서 직접 실행할 수는 없기 때문에, Babel과 같은 도구를 사용하여 JSX 코드를 일반 자바스크립트로 변환해야 합니다.

 

💡 JSX를 이용한 방법

JSX를 이용하면 HTML과 비슷한 형태로 코드를 작성할 수 있습니다. 

---

JSX 코드는 실제로는 자바스크립트 코드이며, HTML이 아닌 자바스크립트 코드 안에서 작성됩니다.

 

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

 

💡 JSX를 이용하지 않은 방법

JSX를 사용하지 않고도 리액트에서 요소를 생성할 수 있습니다. 이때는 React.createElement 함수를 사용합니다. JSX를 이용한 코드와 동일한 결과를 생성합니다.

---

JSX를 이용한 코드와 동일한 결과를 생성합니다. JSX로 작성한 코드는 리액트가 코드를 실행하기 전에 일반 자바스크립트 형태로 변환되므로, 실제로는 React.createElement 함수를 호출하는 것과 동일한 동작을 합니다.

React.createElement("h1", { id: "greeting" }, "Hello, world!");

 

💡 Babel: JavaScript 변환 도구

https://yongyi1587.tistory.com/38

Babel은 자바스크립트 코드의 문법을 확장하고 변환해 주는 도구입니다. 최신 자바스크립트 문법이나 실험적인 문법을 사용해도 Babel을 통해 구형 브라우저와 같은 환경에서도 호환 가능한 자바스크립트로 변환할 수 있습니다.

---

JSX 코드를 자바스크립트로 변환하기 위해서도 Babel을 활용합니다. Babel은 플러그인과 프리셋을 이용하여 JSX 코드를 변환합니다. 플러그인은 개별적인 변환 작업을 담당하고, 프리셋은 특정 환경에 대한 플러그인 모음입니다. Babel 설정 파일을 통해 프로젝트에 맞는 플러그인과 프리셋을 지정하고, Babel은 JSX 코드를 자바스크립트로 변환하여 실행 가능한 형태로 만들어줍니다.

 

✅ JSX 문법

💡 표기법

JSX에서는 변수나 함수를 선언할 때, 그리고 HTML의 style 속성을 표현할 때 카멜 표기법을 사용합니다. 

const myElement // 변수
function sayHello() // 함수
<h1 style={{ backgroundColor: 'blue' }}>파란색</h1> // HTML 태그의 스타일 속성

---

또한, HTML 태그의 class 속성은 JSX에서는 className으로 사용해야 합니다.

 

 

💡 표현식 

JSX 안에서 중괄호({})를 사용하여 변수나 함수의 반환값과 같은 JavaScript 표현식을 삽입할 수 있습니다. 이를 통해 동적인 값을 JSX 요소에 포함시킬 수 있습니다.

---

name이라는 변수를 선언하고 JSX 안에서 중괄호로 감싸 사용하였습니다. JSX 안의 중괄호에는 유효한 JavaScript 표현식을 사용할 수 있습니다.

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

---

또한, 함수 호출의 결과도 JSX 안에 포함시킬 수 있습니다. 다음은 함수 formatName(user)의 결과를 <h1> 엘리먼트에 포함시킨 예시입니다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Mark',
  lastName: 'LEE'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

---

JSX는 컴파일된 후에 정규 JavaScript 함수 호출로 변환되며 JavaScript 객체로 인식됩니다. 따라서 JSX는 if 구문이나 for 루프 안에서 사용하거나 변수에 할당하고, 인자로 전달하거나 함수에서 반환할 수 있습니다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

 

💡 JSX 속성 정의

JSX에서 요소에는 HTML과 유사한 속성을 사용할 수 있습니다. 따옴표를 사용하여 문자열 리터럴을 정의할 수 있습니다.

const element = <a href="https://www.reactjs.org"> link </a>;

---

또한, 중괄호({})를 사용하여 속성에 JavaScript 표현식을 삽입할 수도 있습니다. 

• 중괄호 주변에 따옴표를 사용하여 속성에 JavaScript 표현식을 삽입할 때는 주의해야 합니다. 동일한 속성에 동시에 따옴표(문자열 값에 사용)와 중괄호(표현식에 사용)를 동시에 사용하면 안 됩니다.

 

const element = <img src={user.avatarUrl}></img>;

---

JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 속성 이름 대신 camelCase 프로퍼티 명명 규칙을 사용합니다. 예를 들어, JSX에서 class는 className으로, tabindex는 tabIndex로 작성되어야 합니다.

 

💡 JSX  부모 태그

JSX에서는 HTML 태그를 반환할 때 반드시 부모 태그로 묶어주어야 합니다. JSX는 단 하나의 부모 태그를 가져야 하며, 여러 개의 자식 요소를 포함할 수 있습니다. 부모 태그로는 특정한 HTML 태그를 사용할 필요는 없으며, Fragment라고 불리는 빈 태그 모양을 사용할 수도 있습니다. 이렇게 JSX를 작성하면 여러 개의 요소를 하나의 부모 태그로 묶어 반환할 수 있습니다.

<div>
  <h1>Hello!</h1>
  <h2>Good to see you here.</h2>
</div>

---

태그가 비어있는 경우, XML 문법과 같이 />를 사용하여 바로 닫아주어야 합니다.

 

 

const element = <img src={user.avatarUrl} />;

 

💡 JSX XSS, cross-site-scripting 공격 방지

JSX는 사용자 입력을 삽입할 때에도 안전합니다. JSX 안에서 사용자 입력을 중괄호로 감싸서 삽입하면, React DOM은 삽입된 값을 이스케이프 하여 XSS 공격을 방지합니다. 

• response.potentiallyMaliciousInput은 사용자 입력으로부터 받은 값입니다. 하지만 JSX는 이를 안전하게 렌더링 하여 애플리케이션에서 실행되는 JavaScript 코드로 인식되지 않도록 합니다

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;

 

💡 JSX 객체 표현

JSX는 Babel과 같은 도구를 통해 React.createElement() 호출로 컴파일됩니다. JSX 코드는 React.createElement()를 호출하는 것과 동일한 결과를 만들어냅니다. 

---

다음 두 예시는 동일합니다.

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

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

---

React.createElement() 함수는 JSX를 컴파일하여 일련의 객체로 변환합니다. 이러한 객체는 React 엘리먼트라고 불리며, 화면에 보이는 컴포넌트의 표현입니다. React는 이 객체를 읽어 들여 DOM을 구성하고 상태를 유지하는 데 사용합니다.

 

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