[React] JSX

React의 공식문서를 통해 JSX를 공부하고 정리해보자. 그동안 프로젝트를 하면서 자연스럽게 JSX를 사용하고 있었는데 정확한 개념과 사용방법 등을 정리해보려고 한다.

---

JSX란?

아래의 문법은 JSX를 통해 하나의 element를 생성한 것이다.

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

JSX는 Javascript를 확장한 문법이다. 이는 브라우저에 실행되기 전에 코드가 Webpack으로 번들링되는 과정에서 Babel을 통해 일반 Javascript 형태의 코드로 변환된다.

 

JSX를 통해 마크업과 로직을 분리하는 대신 두 개의 개념을 포함한 "컴포넌트"를 통해 관심사 분리를 할 수 있다.

 

JSX 문법

 

부모 요소로 감싸기

컴포넌트에 여러 element를 반환한다면 반드시 하나의 부모 요소로 감싸주어야 한다. 아래처럼 두 개의 element를 반환하면 에러가 발생한다.

return (
	<h1>React</h1>
    	<h2>Hello</h2>
   	)

 

아래처럼 element 들을 최상위 요소가 감싸주어야 정상적으로 동작된다. 이때 이러한 용도로 의미없는 태그를 넣기 싫을 때는 <Fragment>를 대신 삽입할 수 있고, <>도 삽입할 수 있다.

return (
    <div>
    	<h1>React</h1>
        <h2>Hello</h2>
    </div>
    )

 

표현식 삽입하기

JSX의 중괄호 안에는 모든 Javascript 표현식을 넣을 수 있다. 아래의 코드처럼 중괄호 안에 삼항 연산자로 원하는 값을 출력할 수도 있고 함수를 정의하고 함수의 반환값을 활용하여 출력할 수도 있다.

const [age, setAge] = useState(20);
return(
    <>
        <p>{age >= 20 ? "성인" : "학생"}</p>
    </>
    )

 

XSS 방지

기본적으로 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 문자로 치환하기 때문에 애플리케이션에서 명시적으로 작성되지 않은 내용은 삽입되지 않는다. 이를 통해 XSS(Cross-Site-Scripting)공격을 방지할 수 있다.

 

JSX 속성 정의

중괄호를 사용하여 속성에 Javascript 표현식을 삽입할 수도 있다. 여기서 속성에 Javascript 표현식을 삽입할 때는 따옴표를 함께 삽입하지 않아야 한다. 따옴표 또는 중괄호 중 하나만을 사용하도록 한다.

const element = <img src={logoPath} />

 

주석

아래와 같이 JSX를 통해 주석을 작성할 수 있다. VScode에서 단추키는 Alt + Shift + a이다.

return (
    <> {/* 이것은 주석입니다. */}
      <h1>{message}</h1>
    </>
  )