[React] JSX 기본 규칙과 장단점

JSX는 자바스크립트 확장문법이다.

1. JSX를 사용하는 스크립트 파일은 상단에서 React를 꼭 불러와야 한다.

2. 태그는 꼭 닫혀있어야 한다.

<div> 태그를 열었으면 </div>를 사용하여 태그를 꼭 닫아주어야 한다. html에서 <br>태그를 작성 할 때 처럼 태그를 안닫으면 리액트에서는 오류가 발생한다.


3. 최상위 태그는 꼭 1개여야 한다.

작성된 태그들 전부를 하나로 묶는 최상위 태그가 존재해야한다. 다르게 말하면 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져있어야 한다. 

가장 간단한방법으로 태그 전체를 <div></div> 태그 안에 넣어 감싸는 것이고 스타일관련 설정을 할 때 혹은 table관련 태그를 작성하면서 문제가 발생될 수 있기 때문에 <Fragment></Fragment> 태그를 이용하여 태그들을 감싼다.

Fragment가 에러가 뜰 경우 <React.Fragment></React.Fragment>를 사용하자!  

React.Fragment의 단축문법으로 <> </> 공백태그가 있다. 공백태그로 감싸도 된다!


4. JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, 논리 연산자를 사용한다. 

반면에 if 조건문을 사용할 수는 없다. 만약에 if 조건문을 사용하려면 IIFE(즉시실행함수표현)을 사용해야한다. 

switch문을 사용하는것은 무관한다.


5. 리액트 컴포넌트에서는 class 대신에 className을 사용한다. 또한 css style 속성을 사용할때는 style='color: red; padding: 20px'등과 같이 작성하지 않고 객체를 사용하여 해당속성을 지정한다. 

JSX 문법은 중괄호 표기법을 사용하여 값을 출력할 수 있다.

#선언시

const style = {

backgroundColor: 'black',

color: 'blue',

fontSize: '100px'

}

# 적용시

<div style={style}>BODY</div>

프로퍼티에대한 값은 무조건 " "(큰 따옴표) 또는 ' '(작은 따옴표) 안에 작성한다.

CSS 파일을 적용할때는 CSS파일을 import하고 CSS파일안에 적은 속성들을 아래와 같이 작성한다.

#App.CSS 파일

.App {

background: black;

color: aqua;

font-weight: 600;

}

#App.js파일

import React from 'react';

import './App.css'; //css 파일 호출

function App() {

return (

<>

{/*속성을 문자열로 작성하여 적용 */}

<div className='App'>안녕하세요</div>

</>

);

}

export default App;

6. JSX에 주석을 작성할 때는 {/* ... */} 이와같이 작성하고 주석 단축키 Ctrl + / 로 주석을 작성하면 편리하다.

JSX에서는 흔히 알고 있는 // 나 /* */ 멀티라인 주석을 사용하게되면 텍스트로 인식되어 그대로 화면에 표시된다. 

하지만 컴포넌트 작성시 직관성을 위해서 코드들을 세로로 작성하는 경우에도 주석을 작성해야하는 경우가 발생하는데 이때는 jsx태그 안에 //를 사용하여 주석을 작성할 수 있다.

import React from 'react';

import './App.css'; //css 파일 호출

function App() {

return (

<>

<div className='App'

// 이렇게 작성도 가능하다.

>안녕하세요

</div>

</>

);

}

export default App;

JSX 장단점

장점

1. 가독성이 좋아진다.

2. injection attack 방어 -> 리액트 DOM은 기본적으로 렌더링하기전에 임베딩된 값을들 모두 문자열로 변환한다. 그러므로 명시적으로 작성되지않은 값들이 사용될 수 없다. 그래서 XSS(Cross-site Scripting)라 부르는 공격을 방어한다.

단점

엄격한 규칙?