[ React ] HTML 같기도 하지만 JSX라고 합니다. JSX란 무엇인가?

JSX란 무엇인가요?

JavaScript XML의 약자로 JavaScript와 XML(또는 HTML)을 조합한 문법.

JSX란 자바스크립트 표현식을 확장한 문법으로 

리액트에서 컴포넌트의 UI를 표현하는데 사용한다.

HTML과 유사한 형태지만 자바스크립트로 컴파일되어

가상 DOM을 생성하는 데 쓰인다.

 

 

JSX는 어떻게 쓸까요?

JSX는 자바스크립트 코드 안에서 중괄호 {}로 감싸서 사용한다.

 

import React from 'react';

function Introduce(props) {
	return <h1>Hi, my name is {props.name}!</h1>;
}

const element = <Introduce name="Zestlumen" />;

 

이를 통해 리액트 컴포넌트에서 동적인 값을 쉽게 출력하고 조절할 수 있다.

 

 

JSX의 원리

JSX는 바벨(Babel)과 같은 도구를 사용해 자바스크립트로 컴파일 된다.

JSX 문법은 createElement() 함수로 변환되어 리액트 컴포넌트가 가상 DOM을 생성한다.

 

위의 코드를 React.createElement() 메서드를 사용하면 아래와 같다.

 

import React from 'react';

function Introduce(props) {
  return React.createElement('h1', null, `Hi, my name is ${props.name}!`);
}

const element = React.createElement(Introduce, { name: 'Zestlumen' });

 

React.createElement()함수는 첫 번째 인자로 태그 이름 또는 컴포넌트를 받고,

두 번째 인자로는 속성(props) 객체를 받는다.

세 번째 인자는 요소의 자식 요소 또는 텍스트 내용을 담는다.

 

const element = React.createElement(Introduce, { name: 'Zestlumen' });는

React.createElement()를 사용해 Introduce라는 컴포넌트를 생성하고

컴포넌트는 name 속성을 전달한다.

 

 

 

 

JSX를 쓰면 좋은 점

 

1. HTML과 유사한 형태라 가독성이 좋다.

컴포넌트의 구조를 쉽게 파악할 수 있고 직관적으로 UI를 표현한다.

2. 컴포넌트화

JSX를 사용해 리액트 컴포넌트를 작성 가능하며,

재사용 가능한 UI 요소로 만들어 코드의 모듈화를 촉진한다.

3. 동적인 값 처리 가능

JSX에서 중괄호{}를 사용해 동적인 값을 처리할 수 있다.

 

 

 

 

JSX 사용 시에 주의할 점

1. JSX에서 자바스크립트 코드를 사용할 때는 중괄호{}로 감싸줘야 한다.

2. JSX 내부에서는 자바스크립트 표현식을 사용할 수 있지만

자바스크립트 문장은 사용할 수 없다.

표현식은 값을 반환하는 코드이고, 문장은 실행코드이다.

3. JSX에서 클래스명은 className 속성으로 지정해야 한다.

인라인 스타일의 경우에는 객체 형태로 지정해야 한다.

4. 주석 사용시 {/* */}형태로 작성해야 한다.

5. JSX 컴포넌트 이름은 반드시 대문자로 시작되어야 한다.

소문자로 시작하는 컴포넌트는 HTML 태그로 인식될 수 있다.

6.조건부 렌더링에는 삼항연산자나 논리연산자를 사용해야 한다.

if문은 사용 불가.(표현식이 아닌 문이기 때문에, 2번과 같은 내용)

7.사용자 입력값을 넣을 때 이스케이프 처리로 XSS공격을 방지해야 한다.

react-dom 라이브러리의 ReactDOMServer 모듈을 사용해서

renderToString() 함수를 이용해 입력값을 이스케이프 처리할 수 있다.

 

***XSS란

Cross-Site Scripting 크로스 사이트 스크립팅

웹 애플리케이션에서 발생하는 보안 취약점으로 악의적인 사용자가

웹 사이트에 악성 스크립트를 삽입해 다른 사용자에게 악영향을 미치거나

중요한 정보를 탈취하는 공격 기법.

ex) 악의적인 사용자가 댓글이나 폼,텍스트 입력 필드에 악성스크립트를 주입해

사용자 정보를 유출하거나 인증 정보를 탈취하는 해킹을 한다.