[react] jsx

JSX는 JavaScript XML의 줄임말로 자바스크립트에 XML을 추가한 확장형 문법입니다.

해당 문법으로 작성된 코드는 브라우저가 실행되기 전, 코드가 번들링 될 때 바벨을 통해 일반 자바스크립트 형태로 변환돼 작동하는데요.

React에선 JSX 사용이 필수는 아니지만 사용하는 것을 권장하고 있습니다.

이유는 다음과 같습니다.

1. 가독성이 좋음

일단 element 생성만 보더라도 JS 함수를 사용하지 않고 HTML 태그를 값으로 넣을 수 있습니다.

예로, React 프로젝트 내 App.js 파일만 보더라도 JSX로 작성돼있는데요.

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

이부분을 일반 JS로 작성하면 다음과 같이 입력해줘야 합니다.

function App(){
    return React.createElement("div",null,"Hello",React.createElement("h1",null,"World!"))
}

보다시피 가독성이 떨어지죠, 요소가 2개 뿐인 지금도 그러니, 더 많아진다면 어떻게 될지 짐작이 가실겁니다.

2. 편리함

내용 변경

main 페이지 내용이 바뀔 때 마다 App() 함수의 return값을 바꾸려면 유지보수가 힘듭니다.

그럴 때 JSX는 let post 변수로 서버데이터를 받아서 { post } 이렇게 넣어줄 수 있어 편리합니다.

function App(){
    let post = "<div> Hello 
		<h1>World!</h1>
	   	<span>변경된 내용</span>
                  </div>"
    return(
          {post}
       )
}

반면, 전통적인 js방법은 document.getElementById()로 받은 요소에 innerHTML = “서버테이터 내용”을 입력해야 되서 불편하죠.

함수 삽입

React는 function을 사용할 때도 원하는 자리에 직접 { method() }라고 입력하면 끝입니다.

function App(){

    function method(){
           return 100;
    }

    return(
          <div> Hello {method()}
              <h1>World!</h1>
          </div>
       )
}

이렇게 입력시 Hello뒤에 100이 붙어서 나옵니다.

만약 useState를 써서 바로 실행 말고 조건에 따라 변경함수가 실행되길 원한다면 ()없이 { 변경함수 }라고 입력하면 됩니다.

import React, {useState} from react

function App(){

    let [값, 변경] = useState(0);
    
    변경(값과 같은 자료형);
    
    return(
          <div> Hello
              <h1 onClick = { 변경 }>World!</h1>
          </div>
       )
}

이미지 삽입

App.js 상단에 디렉토리의 파일을 import 하고 <img src = { logo }>입력하면 됩니다.

import 이미지변수명 from '이미지파일위치'
//import logo from './logo.svg';

function App(){

    return(
          <img src = {이미지변수명}>
          <img src = {logo}>
	
       )
}

주의점

HTML이나 JS와 비슷한 부분이 있지만 분명 차이가 있기 떄문에 JSX에 맞는 형식으로 코딩을 해주셔야 오류가 나지 않습니다.

문법 차이

예로 태그에 class 주고 싶으면 class=”이름” 대신 className=”이름”이라고 해줘야 되고 태그에 직접 style 속성값을 넣을 떄 HTML에서 했던 방식으로 하면 에러가 나기때문에 JSX에 맞는 형식으로 바꿔줘야 합니다.

<div style ="color: red;"> // 안됨
<div style => // 됨

자동 이스케이프

위험한 HTML구문에 대해 자동 이스케이프를 적용하기 때문에 보안엔 유리하지만 특수문자를 사용할 수 없습니다. 그럴 때는 카멜케이스로 이름을 변경해 사용합니다.

<div style ="font-size: 10pt;"> // 안됨
<div style => // 됨

참조

💻 JSX 소개 💻 JSX 이해하기