React : JSX(JavaScript XML)에 대해서

JSX(JavaScript XML)은 문법적 편의를 제공하기 위해 JavaScript에 XML을 추가하여 확장한 문법이다. 공식적인 JavaScript 문법은 아니지만, 바벨 등과 같은 컴파일러를 통하여 JavaScript로 변환한 후에 사용이 가능하다. JSX의 경우 React.createElement() 호출을 반복하는 대신에 간결하게 작성이 가능하다. JSX가 React의 필수는 아니지만, 공식 웹사이트에서 사용을 권장하고 있다. 

 

JavaScript

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  React.createElement(
    React.Fragment,
    null,
    React.createElement("h1", null, "Hello React!"),
    React.createElement("p", null, "JSX없이 React 사용하기")
  )
)

 

위와 같은 JavaScript코드를 JSX로 표현하면 아래와 같다. 확실히 React.createElement() 호출을 반복하는 것을 줄일 수 있고, 코드도 간결해져서 가독성이 좋아지는 것을 볼 수 있다. 

 

JSX 

    <div>
      <h1>Hello React!</h1>
      <p>JSX로 React 사용하기!</p>
    </div>

 

JSX 문법에 대해

JSX에서만 특별히 허용되는 문법과 지켜야 할 문법이 존재한다.

 

1. 최상위 요소가 하나여야 한다. 최상위 요소를 리턴하는 경우 () 로 감싸야 한다.

만약 어떤 요소로 감싸기 애매할 경우 <Fragment></Fragment>나 <></>를 사용하여 감쌀 수 있다. 

function Start() {
  return (
    <>
      <div>
        <h1>안녕하세요 반갑습니다.</h1>
        <p>여기는 코딩쥐의 티스토리 입니다.</p>
      </div>
      <div>
        <p>반드시 하나의 엘리먼트 요소로 묶어야 합니다!</p>
      </div>
    </>
  )
}
export default Start

 

2. 자바스크립트 표현식을 작성하려면 {표현식}을 이용한다. 

function Start() {
  const name = "코딩쥐";
  const site = "코딩쥐의 티스토리"
  return (
    <> 
      <div>
        <h1>반갑습니다. 저는 {name}입니다.</h1>
        <p>여기는 {site}입니다.</p>
      </div>
    </>
  )
}
export default Start

3. if, for 등의 복잡한 자바스크립트는 사용할 수 없다

{표현식}만 삽입이 가능하며, 복잡한 자바스크립트 로직을 삽입해야 하는 경우에는 별도로 함수에 작성하여 적용한다. if문의 경우 삼항연산자를 통해 사용이 가능하다. 아래와 같이 작성했을 경우 버튼의 글자가 'ON'으로 나타난다. 

function Start() {
  const onOff = true;

  return (
    <> 
    <button>{(onOff) ? "ON" : "OFF"}</button>
    </>
  )
}
export default Start

4. camelCase 명명 규칙

style을 이용해 인라인 스타일링이 가능하다. 이때 모든 스타일명은 camelCase로 작성된다. 

function Start() {
  const onOff = true;
  const style ={
    backgroundColor : "lightgray",
    width : "100",
    height : "100",
    fontSize: "2rem",
    borderRadius : "20px"
  };
  return (
    <> 
    <button style={style}>{(onOff) ? "ON" : "OFF"}</button>
    </>
  )
}
export default Start

5. class가 아닌 className을 사용해야 한다. 

JSX 이벤트 종류

종류	설명
onClick	요소를 클릭했을 때 발생하는 이벤트
onChange	입력 필드의 값이 변경되었을 때 발생하는 이벤트
onSubmit	폼이 제출되었을 때 발생하는 이벤트
onMouseOver	마우스가 요소 위로 이동했을 때 발생하는 이벤트
onMouseOut	마우스가 요소 밖으로 이동했을 때 발생하는 이벤트
onKeyDown	키보드의 키를 눌렀을 때 발생하는 이벤트
onLoad	페이지나 이미지 등이 완전히 로드되었을 때 발생하는 이벤트

 

---

자세한 내용은 React 사이트에서 확인할 수 있다.