React 기본, JSX(JavaScript XML)와 JSX 문법 규칙 한번에 알아보기

👾 JSX(JavaScript XML)란?

 JSX는 JavaScript를 확장한 문법으로 React에서 UI를 구성할 때 사용한다.

 

 JSX는 React에서 UI 컴포넌트를 선언적으로 작성하기 위해 도입되었다. 기존의 JavaScript 코드 안에 HTML과 유사한 구문을 인라인으로 작성하여 UI 요소를 표현할 수 있게 한다. 이는 UI와 관련된 로직과 마크업을 한 곳에서 작성할 수 있어 개발자에게 편리함을 제공한다.

 JSX를 사용하면 JavaScript 변수, 함수, 표현식 등을 마크업 안에서 중괄호({})로 감싸서 사용할 수 있다. 이를 통해 동적인 값을 템플릿에 쉽게 삽입하고, 조건문과 반복문 등을 활용하여 유연한 UI를 생성할 수 있다.

 

 JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니기 때문에 Babel과 같은 트랜스파일러를 통해 브라우저가 이해할 수 있는 JavaScript로 컴파일해야 한다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링한다.

 

 

👾 JSX 문법 규칙

✔️ 1. 주석

 JSX 안에서 주석을 작성하는 방법은 일반 자바스크립트에서 작성하는 방법과는 다르며, {/* 주석 */} 이와 같이 표현한다.

function App() {
  return (
    // 태그 외부에서의 주석
    <div>
      {/* 태그 내부에서의 주석 */}
      Hello, React!
    </div>
  );
}

 

✔️ 2. 최상위 태그 규칙: 반드시 하나의 최상위 태그가 있어야 한다.

function App() {
  return (
    <div> {/* 최상위 태그 */}
      <div>
        <h1>Hello</h1>
      </div>
      <div>
        <h2>React</h2>
      </div>
    </div>
  )
}

 → VirtualDOM 에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문

 

• 또는 React v16 이상부터 도입된 <React.Fragment>를 사용할 수도 있다.

Fragment는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.

import { Fragment } from 'react';

function App() {
  return (
    <Fragment> 
      <div>
        <h1>Hello</h1>
      </div>
      <div>
        <h2>React</h2>
      </div>
    </Fragment>
  )
}

 

• 태그를 작성 할 때 이름 없이 작성을 하게 되면 Fragment가 만들어진다.

function App() {
  return (
    <> 
      <div>
        <h1>Hello</h1>
      </div>
      <div>
        <h2>React</h2>
      </div>
    </>
  )
}

 

✔️ 3. JSX에서는 모든 태그를 닫아줘야 한다.

<div></div>
<input /> // self-closing 태그

 

✔️ 4. CSS class 속성은 className으로 표기한다.

<div className="myClass"></div>

 

✔️ 5. JavaScript 표현식 사용시 {중괄호}를 사용한다.

중괄호를 사용하지 않으면 일반 텍스트로 인식한다.

function App() {
  const name = "react"
  return (
    <div>
      Hi, {name}
    </div>
  )
}

 

✔️ 6. 사용자 정의 컴포넌트는 대문자로 시작한다. (PascalCase)

 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식한다.

function MyComponent() {
  return <div>Hello, {name}</div>
}

function Hello() {
  return <MyComponent />
}

 

✔️ 7. 조건부 렌더링

 • 조건부 렌더링에는 if문이 아닌 삼항연산자를 사용한다.

JSX 내부의 자바스크립트에서는 if문을 사용할 수 없다. (JSX 외부에서는 사용 가능)

function App() {
  const name = "react";
  return (
    <div>
      {name === "react" ? <p>react</p> : <p>javascript</p> }
    </div>
  )
}

 

 • 또는 AND 연산자(&&)를 사용할 수 있다.

function App() {
  const name = "react";
  return (
    <div>
      {name === "react" && <p>react</p> }
    </div>
  )
}

 → JSX에서 boolean, null, undefined를 렌더링하게 된다면 아무것도 나타나지 않는다. (유효하지만 렌더링만 되지 않는다.)

하지만 0과 같은 falsy한 값들은 React가 렌더링 하기 때문에 주의해야 한다.

(관련 자료는 react 공식문서 확인)

 

✔️ 8. 여러 개의 HTML 엘리먼트를 표시할 때는 map() 함수를 사용할 수 있다.

 • map 함수를 사용할 때는 key라는 props를 설정해야 한다.

 • key 속성값은 변하지 않고, 예상가능하며, 유일해야 한다. (ex. id)

const posts = [
  { id : 1, title : 'Hello World', content : 'Welcome to learning React!' },
  { id : 2, title : 'Installation', content : 'You can install React via npm.' },
  { id : 3, title : 'reusable component', content : 'render easy with reusable component.' },
  // ...
  { id : 100, title : 'I just got hired!', content : 'OMG!' },
];

function Blog() {
  const postToElement = (post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );

  const blogs = posts.map(postToElement);

  return <div className="post-wrapper">{blogs}</div>;
}

 

---

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊