JSX(JavaScript for XML) 살펴보기

JSX(JavaScript for XLM)는 javascript 구문을 조금 확장한 것이라고 생각하시면 됩니다.

HTML과 javascript를 섞어서 쓸 수 있습니다. 주로 리액트에서 많이 사용됩니다.

 

예전에는 웹을 만들 때, 화면구조와 내용은 HTML, 디자인은 CSS, 로직은 javascript로 나눠서 만들었습니다.

파일도 별도로 관리됐죠.

 

 

그런데 웹이 더 복잡해지고, 상호작용도 많아지면서, 로직에 따라 다른 HTML을 보여주는 상황이 늘어났습니다. 그래서 javascript가 바로 HTML을 다룰 수 있도록 JSX가 나타났습니다.

// JSX 구문

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// javascript 구문

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

위의 JSX와 javascript로 작성한 구문 중 어느 것이 더 알아보기 쉬우십니까? 전 JSX가 깔끔하고 보기 쉬워 보이네요. 

 

이렇게 쉽게 사용할 수 있지만, JSX를 사용할 때는 몇 가지 지켜야 할 규칙이 있습니다. 

 

1. 두 개 이상의 엘리먼트는 하나의 엘리먼트로 감싸져야 된다.

컴포넌트에서 여러 요소를 반환하려면 최상위 태그는 하나여야 합니다. 보통 <div></div> 태그를 이용해서 감싸줍니다. 

아래는 <h1>,<img>,<ul>태그 세 개가 있었는데, <div> 태그로 감싸서 처리를 해줬습니다. 

<div>
  <h1>제목</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

<>
  <h1>제목</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

불필요한 <div> 태그가 거슬린다면 Fragment를 사용할 수 있습니다. Fragment는 빈 태그(<></>)를 말하는데, 이 태그로 감싸주면 오류를 피해 갈 수 있고, DOM 트리로 생성되지 않아, 자원 사용을 절감할 수 있습니다. 전 Fragment보다는 <div> 태그를 선호하고 있습니다. 눈에 더 잘 띄더라고요.

 

왜 단일루트 요소가 하나여야 하나 궁금했었습니다. 얘기해 주는 곳이 없어서 답답했었는데, 리액트 공식 문서에 답이 잘 나와 있었습니다. JSX가 실행될 때, 자바스크립트 객체로 변환해서 실행이 되는데, 함수에서 리턴할 때는 하나의 값만 리턴할 수 있기 때문에 그렇습니다. 깔끔한 답변이네요.

https://react.dev/learn/writing-markup-with-jsx 

 

2. 모든 태그는 닫혀야 한다.

<div></div>, <li></li>와 같이 닫힘 태그를 같이 사용하든지, <br />와 같이 하나의 태그를 이용해서 닫힘 태그를 함께 표현해야 합니다. HTML보다 조금 더 엄격하게 체크를 하는 것 같습니다.

 

3. 태그 속성명은 대부분 카멜케이스 형태로 작성한다.

JSX가 javascript로 변환돼서 실행된다는 건 위에서 언급을 했습니다. 자바스크립트는 변수이름에 대시(-)를 사용할 수 없기 때문에 속성명을 카멜케이스 형태로 만듭니다. CSS에서 background-color는 자바스크립트에서 backgroundColor로 표기해야 합니다. html의 class도 자바스크립트에서 예약어가 있어서 className을 사용해야 합니다. 

 

4. 자바스크립트는 대괄호({})사이에 쓴다.

export default function TodoList() {
  const name = 'DongDong';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

위 내용은 이름을 넣는 간단한 예제이지만, 대괄호({})내에 자바스크립트 문법을 모두 사용할 수 있기 때문에 간편하게 코드를 작성할 수 있습니다. 

 

 

5. html을 JSX로 변환할 때 변환기를 사용하라.

HTML을 손으로 하나씩 JSX로 변환하는 것은 문법 에러가 발생하기 쉽습니다.

https://transform.tools/html-to-jsx 사이트의 변환기를 이용해, HTML을 JSX로 쉽게 변환해 볼 수 있습니다.  JSON이나 SVG형식도 다른 형태로 변환할 수 있으니까, 참고해 보시면 좋을 것 같습니다.