6. 리액트 입문-JSX가 뭘까

*이 게시글은 인프런-처음 만난 리액트 강좌를 보고 정리한 글입니다.

---

목차

1. JSX란?

2. JSX의 역할

3. JSX의 장점

4. JSX 사용법

5. React에서 Style 적용하는법

6. 주석 다는법

---

1. JSX란? 

JSX는 자바스크립트 확장 문법이라는 의미로 자바스크립트의 문법을 확장시킨 것이다.

출처 : 처음 만난 리액트-인프런 강좌

JSX는 JavaScript와 XML/HTML을 합친 것이라고 보면 된다.

아래는 간단한 JSX코드이다.

출처 : 처음 만난 리액트-인프런 강좌

왼쪽은 자바스크립트 문법이고 오른쪽은 html처럼 생겼는데 이게 뭔 식이지 생각했을텐데..

이 코드가 자바스크립트코드와 html코드가 결합돼있는 JSX코드인 것이다.

---

2. JSX의 역할

JSX코드는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거치게 된다.

출처 : 처음 만난 리액트-인프런 강좌

 

아래는 Hello라는 이름의 React Component가 나오고 Component 내부에 JSX코드가 사용된 것을 볼 수 있다. 

그리고 이렇게 만든 컴포넌트를 ReactDom의 redner 함수를 이용해 실제 화면에 렌더링을 하고 있다. 

출처 : 처음 만난 리액트-인프런 강좌

위와 아래 코드는 완전 동일한 동작을 하는 코드이다.

JSX코드도 내부적으로는 createElement를 사용하도록 변환되기 때문이다.

 

이렇게 JSX코드를 내부적으로는 createElement로 변환해주는 녀석이 Babel이라는 녀석이다.

Babel이라는 JavaScript Compiler가 해주는 역할이며

Babel의 수많은 플로그인 중 JSX를 JS로 변환해주는 것을 일반적으로 JSX Transform이라고 부른다.

출처 : 처음 만난 리액트-인프런 강좌

 

출처 : 처음 만난 리액트-인프런 강좌

 

createElement의 결과로는 아래와 같은 객체가 생성된다.

객체는 자바스크립트에서 key와 value의 쌍으로 이루어진 집합을 의미한다.

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

React에는 이 객체를 element라고 한다.

 

type은 element의 유형을 나타내고(div태그나 span태그 같은 html태그가 올 수 도 있고 다른 react 컴포넌트가 올 수 도 있음)

props는 속성이 들어가고

children는 이 element가 포함하고 있는 자식 element라고 보면 된다.

출처 : 처음 만난 리액트-인프런 강좌

이렇게 JSX를 사용하기 위해서는 React.createElement로 의존해야했었는데 성능을 향상시키지 못하는 문제점이 있었다.

그래서 현재 리액트에서는 아래와 같은 형태로 JSX Transform이 별도로 분리되었고

Babel에서는 이것을 이용하여 JSX를 JS로 변환하게 된다.

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

위 같은 JSX코드를 내부적으로는 아래와 같은 JS로 변환해주는 것이다.

import {jsx as _jsx} from 'react/jsx-runtime';

function App() {
  return _jsx('h1', { children: 'Hello world' });
}

 

 

리액트에서 JSX를 쓰는 것이 필수는 아니지만 JSX를 사용하면 장점들이 많기 때문에 편리해진다.(생산성, 가독성)

---

3. JSX의 장점

1) 간결한 코드, 가독성 향상, 버그발견하기 쉬움

출처 : 처음 만난 리액트-인프런 강좌

2) Injection Attacks 방어해서 보안 향상

Injection Attack은 쉽게 말해서 입력창에 문자나 숫자같은 값이 아닌 소스코드를 입력하여 해당 소스코드가 실행되게 만드는 수법으로 예를 들어 아이디를 넣는 입력창에 자바스크립트 코드를 넣었는데 그 코드가 그대로 실행돼버리면 문제가 생길 수 있을 것이다. 

 

기본적으로 ReactDOM은 렌더링하기 전에 임베딩된 값을 모두 문자열로 변환한다.

그래서 명시적으로 선언되지 않은 값은 괄호사이에 들어갈 수 없다

이것이 결과적으로 XSS를 막을 수 있다. 

 

*임베딩 :  사람이 쓰는 자연어를 기계가 이해할 수 있는 숫자의 나열인 벡터로 바꾼 결과 혹은 그 과정 전체를 의미한다.

출처 : 처음 만난 리액트-인프런 강좌

---

4. JSX 사용법

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.

리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸야 하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

 

아래와 같이 최종적으로는 하나의 요소로 감싸줘야한다.

 

기본적으로 자바스크립트를 확장한 것이므로 모든 자바스크립트 문법을 지원한다.

 

XML/HTML 코드를 사용하다가 중간에 JavaScript 코드를 사용해야할 때는 {} 중괄호를 사용한다.

출처 : 처음 만난 리액트-인프런 강좌

태그의 속성에 값을 넣고싶을 때는 큰따옴표 사이에 문자열을 넣거나 중괄호 사이에 자바스크립트 코드를 넣으면 된다.

출처 : 처음 만난 리액트-인프런 강좌

---

5. React에서 Style 적용하는법

 

html에서 style을 바로 적용하는 방법을 인라인 스타일 시트라고 하는데 

<p style="color: blue">Lorem ipsum dolor.</p>

이런 인라인 스타일링을 리액트에서는 다음과 같이 표현한다.

 

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어줘야하는 것이다.

자바스크립트 코드니까 중괄호가 있는데 객체형태이므로 또 중괄호가 생겨 이중 중괄호 형태가 된 것이다.

 

또한 스타일 이름 중에서 background-color처럼 -문자가 포함되는 이름은 -문자를 없애고 카멜 표기법으로 작성한다.

background-color는 backgroundColor로 작성한다.

<p style={{color: blue}}>Lorem ipsum dolor.</p>

 

일반 HTML에서 CSS 클래스를 사용할때는 class 속성을 사용하지만 JSX에서는 class가 아닌 className으로 설정해줘야한다.

HTML에서는 <input>태그 처럼 닫아주지않아도 작동하지만 JSX에서는 <input/>태그 처럼 무조건 닫아줘야한다.

---

6. 주석 다는법

JSX 내부에서 주석을 작성할때는 {/*   */} 형식으로 작성한다.

---

참고문헌

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

2. babel-plugin-transform-react-jsx - npm (npmjs.com)

3. Introducing the New JSX Transform – React Blog (reactjs.org)

4. 리액트를 다루는 기술-김민준