[새싹 성동 2기] JSX - JavaScript의 확장 문법과 활용법

JSX는 JavaScript XML의 약자로, 자바스크립트에 XML/HTML 문법을 결합하여 간결하고 직관적인 UI 코드를 작성할 수 있는 문법입니다. 리액트(React)에서 컴포넌트를 정의하거나 UI를 구성할 때 주로 사용됩니다. 이 글에서는 JSX의 특징과 규칙, 그리고 주요 활용법을 소개합니다.

 

1. JSX란?

JSX는 JavaScript와 XML의 조합으로, HTML 요소를 JavaScript 코드 안에서 작성할 수 있습니다.

 

const element = <h1>Hello, World!</h1>;

//위 코드는 Babel을 통해 일반 JavaScript로 변환됩니다.

const element = React.createElement("h1", {}, "Hello, World!");

 

JSX의 장점

1. HTML과 JavaScript를 하나의 파일에 작성 가능.
2. 간결한 문법으로 가독성과 생산성이 향상.
3. 동적 UI 구성에 유리.

2. JSX로 버튼 컴포넌트 만들기

JSX 없이 React에서 버튼을 만드는 방법:

import { useState } from "react";

function MyButton() {
    const [isClicked, setIsClicked] = useState(false);
    return React.createElement(
        "button",
        { onClick: () => setIsClicked(!isClicked) },
        isClicked ? "클릭되었습니다." : "클릭해 주세요."
    );
}

 

JSX를 사용하면 훨씬 간결합니다:

 

import { useState } from "react";

function MyButton() {
    const [isClicked, setIsClicked] = useState(false);
    return (
        <button onClick={() => setIsClicked(!isClicked)}>
            {isClicked ? "클릭되었습니다." : "클릭해 주세요."}
        </button>
    );
}

export default MyButton;

 

3. JSX 규칙

#1. 반드시 하나의 부모 요소로 감싸야 함

JSX는 인접한 요소를 허용하지 않으므로 하나의 부모 요소로 감싸야 합니다.

문제 코드

return (
    <h1>리액트 앱</h1>
    <h2>JSX 규칙</h2>
);​

해결 방법

새로운 태그로 감싸기:

return (
    <div>
        <h1>리액트 앱</h1>
        <h2>JSX 규칙</h2>
    </div>
);

Fragment 사용하기:

import { Fragment } from 'react';

return (
    <Fragment>
        <h1>리액트 앱</h1>
        <h2>JSX 규칙</h2>
    </Fragment>
);

축약된 Fragment 사용:

return (
    <>
        <h1>리액트 앱</h1>
        <h2>JSX 규칙</h2>
    </>
);

#2. JSX 안에서 JavaScript 표현식은 {}로 감싸기

JSX 내부에서는 JavaScript 코드를 {}로 감싸서 사용할 수 있습니다.

const name = "홍길동";
const number = 2;

return (
    <>
        <h1>안녕, {name}</h1>
        <h2>{number + 1}</h2>
    </>
);

#3. 조건부 렌더링

JSX는 if 문 대신 삼항 연산자나 && 연산자를 사용합니다.

삼항 연산자:

<h2>{name === "홍길동" ? "환영합니다." : null}</h2> // 조건 만족하지 않으면 null을 반환

&& 연산자:

<h2>{name === "홍길동" & "환영합니다."}</h2> // 연산자 뒤의 결과를 반드시 확인 후 false 반환

<h2>{name === "홍길동" && "환영합니다."}</h2> // 연산자 뒤의 결과를 확인하지 않고 false 반환 가능

 

#4. 인라인 스타일

JSX에서 스타일을 지정할 때는 객체 형태로 작성합니다. 스타일 이름은 카멜 표현식이며 숫자 타입의 경우 단위 생략시 기본값이 px로 지정됩니다.

태그 내의 스타일 속성을 이용하는 방법:

function App() {
  const name = "홍길동";

  return (      
    <>           
      <div style={{ backgroundColor: 'black', color: 'yellow', fontSize: 48, padding: '16px' }}>

        안녕, {name}!
      </div>
    </>
  );

인라인 스타일을 별도의 변수로 선언해서 사용:

function App() {
  const name = "홍길동";
  const myStyle = { backgroundColor: 'black', color: 'yellow', fontSize: 48, padding: '16px' };

  return (
    <>
      <div style={myStyle}>
        안녕, {name}!
      </div>
    </>
  );
}

여러 스타일을 일괄적으로 선언해서 사용:

function App() {
  const name = "홍길동";
  const styles = {
    divStyle: { backgroundColor: 'black', color: 'yellow', fontSize: 48, padding: '16px' },
    h1Style: { TextDecoder: 'underline' }
  };

  return (
    <>
      <div style={styles.divStyle}>
        <h1 stdyle={styles.h1Style}>안녕, {name}!</h1>
      </div>
    </>
  );
}

 

#5. CSS 클래스는 className 사용

JSX에서는 HTML의 class 속성이 JavaScript 예약어와 충돌하므로 className을 사용합니다.

예를 들면 아래와 같습니다.

App.css 파일에 아래의 스타일을 추가

.react {
  background-color: black;
  color: yellow;
  font-size: 48px;
  padding: 10px;
}

App.js 파일에 App.css 스타일을 임포트한 후 클래스 속성을 추가

import './App.css';

function App() {
  return (
    <>
      <div className="react">홍길동</div>
    </>
  );
}

export default App;

#6. 태그는 반드시 닫아야 함

모든 태그는 닫는 태그를 사용하며 내용이 없을 시 self-closing 태그를 사용해야 합니다.

<input type="text"></input>  //기본 닫음
<input type="text" />	     //self-closing

#7. 기본값 설정 (undefined 처리)

JSX에서 값이 undefined일 경우 기본값을 설정하려면 || 연산자를 사용합니다.

function Name() {
  const name = undefined;
  							   // 여러가지 작업들을 수행하는 코드가 생략
  return name || '아무개';		// || 연산자를 이용해서 undefined인 경우 반환할 기본값을 설정
}

function App() {
  return (
    <>
      안녕, <Name />!
    </>
  );
}

#8. JSX 주석

JSX 내부 주석은 {/* */} 형태로 작성합니다.

return (
    <>
        {/* 화면에 표시되지 않는 주석 */}
        <div>홍길동</div>
    </>
);

 

4. JSX 활용 사례

Next.js 프로젝트에서 MyButton 컴포넌트 추가하기

파일 구조

src/pages/MyButton.js
src/pages/index.js

MyButton.js:

import { useState } from "react";

function MyButton() {
    const [isClicked, setIsClicked] = useState(false);
    return (
        <button onClick={() => setIsClicked(!isClicked)}>
            {isClicked ? "클릭되었습니다." : "클릭해 주세요."}
        </button>
    );
}

export default MyButton;

index.js:

 

import Head from "next/head";
import MyButton from "./MyButton";

export default function Home() {
    return (
        <>
            <Head>
                <title>Create Next App ^^</title>
            </Head>
            <MyButton />
        </>
    );
}

 

 

 

 

 

 

 

 

 

 

 

*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.