Ray`s Tech Lab

JSX란, React.js에서 javascipt를 통해 HTML을 작성할 수 있는 javascript의 확장된 문법이다.

일반적인 HTML태그들과 똑같이 쓸 수 있고, id속성도 똑같이 줄 수 있는데 몇 가지 주의사항이 있다.

HTML태그의 class속성, for속성(label태그등에서) 을 줄 때는 각각 className, htmlFor로 써야 한다는 것이다. 이는 javascript내에서 이미 class, for라는 키워드가 존재하기 때문이다. 그리고

onclick과 같은 event handler를 줄 때도 onClick처럼 camel case로 적어줘야 한다! 두 번째 단어부터는 시작알파벳을 대문자로 적으면 된다는 것임.

두 번째 주의사항은, JXS문법으로 HTML을 작성할 때는 반드시 하나로 감싸진 태그를 작성해야 한다는 것이다. 예를 들어,

import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>안녕 리액트!</h1>
  <h2>안녕안녕 리액트</h2>,
  document.getElementById('root')
);

이런 식으로 쓰면 안 된다. vscode에서는 저렇게 쓰면 빨간 줄이 생기면서 오류라고 알려준다. JSX요소들은 반드시 하나로 감싸줘야 하기 때문! 이렇게 하면 해결할 수 있게 된다.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <div>
    <h1>안녕 리액트!</h1>
    <h2>안녕안녕 리액트</h2>
  </div>,
  document.getElementById('root')
);

npm start를 하고 페이지 검사를 해주면, root div에게 div가 하나 더 생기고 그 밑에 h1, h2태그가 있는 구조를 확인할 수 있다. 근데 이렇게 div태그로 감싸주는 게 싫다면, React에서 제공하는 Fragment를 이용할 수 있다. 아래처럼 하면 된다.

import { Fragment } from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <Fragment>
    <h1>안녕 리액트!</h1>
    <h2>안녕안녕 리액트</h2>
  </Fragment>,
  document.getElementById('root')
);

이렇게 하면 root div 밑에 div가 하나 생기고 그 밑에 h1, h2태그가 있는 게 아니라 root div 바로 밑에 h1, h2태그가 생긴다. 참고로 import 문을 굳이 쓴 다음에 Fragment를 할 필요 없고, 그냥 JSX입력할 때 Fragment자동완성되게 하면 알아서 import해준다. 참 편하다. 암튼 이렇게 Fragment를 잘 사용하면 불필요하게 div태그같은 게 생기는걸 방지할 수 있다. 

근데 솔직히 이렇게 맨날 Fragment써주는 것도 귀찮으니 다음과 같이 축약형으로 쓸 수 있다.

import ReactDOM from 'react-dom';

ReactDOM.render(
  <>
    <h1>안녕 리액트!</h1>
    <h2>안녕안녕 리액트</h2>
  </>,
  document.getElementById('root')
);