JSX - 주요 개념

JSX란?

Syntax extension to JavaScript.

확장된 JS 문법이다.

보통 리액트에서 함수형 component를 만들 때

const SomeComponent = ({someProps})=> {
	
    ~~~someLogic~~~
    
	return (
            <>
            {바로 여기}   
            </>
            )
}

이렇게 만든다. {바로 여기} 들어가는 녀석이 JSX.

보통 그렇게 안하지만,

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

를 만들어 놓고 return 안에 jsxElement를 넣어도 될지도?

규칙

camelCase

JS 이기 때문.
ex. class (x) className (o)
안써주면 콘솔에 WARNING 이 잔뜩! + 실제로 인식 못하는 경우도 있음.

JSX 쓰는 이유

관심사의 분리

리액트 컴포넌트는 UI와 로직을 다른 파일로 분리시켜놓지 않고 느슨하게 합쳐놈. JSX를 쓰면 하나의 컴포넌트 안에서도 관심사의 분리가 더 쉽게 보인다.

XSS 공격 기본적으로 막아줌

XSS (Cross-Site-Scripting) 이란?
웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점.
주로 사용자 입력값 (ex. <input> 태그 안에 받는 값들) 에 공격자가 HTML이나 JS 코드를 넣는 경우.

ex. <script>태그 넣어서 쿠키, 세션 정보 탈취. 공격 코드를 db에 저장되게끔 유도해서 지속적으로 공격할수도 ㄷㄷ

-> 어떻게 막음?

JSX는 모든 값을 escape 한 뒤에 렌더링함.

escape란?
특수문자( <, ( ), 공백( ) 등을 string ( \" ,  ) 요런 식으로 바꿔줌. 코드랑 혼동되지 않도록.

BABEL의 컴파일

BABEL ?

JS 컴파일러. 새로운 버전의 JS 코드 (ES6) 를 오래된 브라우저에서 코드를 실행할 수 있도록 변환해줌.

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

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
// 이 코드는 같은 코드. 이것들이 Babel에 의해

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

이러한 객체로 바뀐다고 함.

이 객체가 바로

REACT ELEMENT