[React] JSX에 대해 알아보자

지난 게시물에서는 React의 3가지 특징

• JSX 문법
• Component
• Virtual DOM
  에대해서 간략하게 공부했다.

이번에는 React의 JSX 문법에대해서 좀더 자세히 알아보려고 한다!

---

JSX란

JavaScript eXtension, JavaScript의 확장 버전이다.

JSX는 HTML 태그를 변수로 할당하고, 호출할 수 있고, 리턴하는 확장 문법이라고 볼 수 있다.

---

JSX 예시

const bread = `Croissant`;
const element = <h> Hello, {bread} </h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

위 예시에서 변수 bread에 문자열을 할당하하여 element 안에 중괄호로 감싸 변수로 사용하였다. 이처럼 JSX안에서는 중괄호를 사용하여 JavaScript 표현식을 넣을 수 있다.

아래 예시처럼 활용할 수도 있다.

function name(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'John',
  lastName: 'Kris'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

여기서는 function name(user)의 리턴값을 element의 <h1>요소에서 변수로 사용하였다.

---

JSX의 몇가지 규칙

1. class가 아니라 className을 사용한다.

JSX는 HTML보다는 JavaScript에 가깝기 때문에, React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.

예시: class는 className가 되고 tabindex는 tabIndex

2. 클로징 태그! 태그는 항상 닫아야한다.

HTML에서 input이나 br을 사용할 때 태그를 닫지 않는 경우가 있다. 하지만 리액트에서는 반드시 클로징 태그를 써줘야 한다.
또한 어떤 태그라도 셀프 클로징이 가능하다.

3. 하나의 부모 태그안에 작성해야한다.

class App extends React.Component {
  render()	{
    result  (
      <div></div>
      <div></div>
      );
}

위 코드는 하나의 div안에 존재하는게 아닌 동일 div가 연속으로 작성된 형제 노드 형태로, JSX 규칙에 어긋난다. 아래처럼 작성 되어야한다.

class App extends React.Component {
  render()	{
    result  (
      <div> - 하나의 부모태그 안에 존재해야 한다.
        <div></div>
        <div></div>
      </div>  
      );
}

4. 자바스크립트의 사용은 {}를 이용한다.

앞서 JSX의 예시에서 처럼 JSX안에서 JavaScript의 사용은 [], 중괄호를 이용해주면 된다.

class App extends React.Component {
  render(){
     const text = "Hello React!";
     return(
          <div>{text}</div> - 변수를 사용하기 위해 {} 이용
     );
}

5. 주석은 {/* 내용 */} !

JSX에서 주석은 /* */을 사용한다. 이때 주의할 점은 {}로 주석을 묶어 주어야 한다. 이때 주석은 멀티라인(Multi-line) 주석이다.

class App extends React.Component {
  render(){
     return(
          <div>Hello</div> 
          {/* 여기가 주석 */} - 주석 작성
     );
}