[React] JSX 문법 17가지 빠르게 살펴보기

https://ko.legacy.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

 

💡 JSX란?

JSX는 JavaScript의 확장 문법으로, HTML과 JavaScript를 결합 하여 UI를 더 직관적으로 구성할 수 있게 합니다. HTML 코드처럼 보이지만 실제로는 JavaScript 객체로 변환되어 브라우저에서 사용되며, 웹팩(Webpack) 로더를 통해 코드가 수정될 때마다 자동으로 화면이 갱신(리렌더링) 됩니다. 주로 리액트에서 사용되지만, 다른 라이브러리에서도 활용할 수 있습니다.

* React는 UI를 만들기 위한 라이브러리이고, JSX는 React에서 HTML과 JavaScript를 결합한 문법입니다.

// JSX 예제
const element = <h1>Hello, React!</h1>;
ReactDOM.render(element, document.getElementById('root'));

 

 

💡 JSX 문법 가이드

✔️ 1. 하나의 최상위 태그 반환

JSX에서는 반드시 하나의 최상위 태그만 반환해야 합니다.

return (
  <div>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </div>
);

✔️ 2. JSX 주석 작성

JSX 주석은 `{/* ... */}` 형태로 작성합니다.  VS Code(Visual Studio Code)에서는 `Alt + Shift + A`를 사용하여 JSX 주석을 작성할 수 있습니다. 

function MyComponent() {
  return (
    <div>
      {/* JSX 내부에서 주석을 사용할 수 있습니다. */}
      <p>이 문장은 렌더링됩니다.</p>
      {/*
        여러 줄 주석도 가능합니다.
        주석은 JSX 내의 다른 모든 요소처럼 작동합니다.
      */}
    </div>
  );
}

export default MyComponent;

✔️ 3. Fragment 사용

불필요한 노드를 피하기 위해 `<div>` 대신 `<React.Fragment>` 또는 빈 태그 `<>`를 사용합니다.

import React from 'react';

function MyComponent() {
  return (
    <div>
      {/* React.Fragment 사용 */}
      <React.Fragment>
        <h1>Hello, World!</h1>
      </React.Fragment>
      {/* 빈 태그 사용 */}
      <>
        <h2>Welcome to JSX</h2>
      </>
    </div>
  );
}

export default MyComponent;

✔️ 4. 변수 참조

JSX 내부에서 변수를 참조할 때 중괄호 `{}`를 사용합니다.

const name = 'React';
return <h1>{name} 배우기</h1>;

✔️ 5. 조건부 렌더링

JSX에서는 if 문 대신 삼항 연산자(condition ? true : false)를 사용해 조건부 렌더링을 구현합니다.

const currentMenu = 'home'; // 현재 활성화된 메뉴 (예: 'home', 'about' 등)

function NavigationMenu() {
  return (
    <ul>
      <li className={currentMenu === 'home' ? 'active' : ''}>Home</li>
      <li className={currentMenu === 'about' ? 'active' : ''}>About</li>
    </ul>
  );
}

export default NavigationMenu;

✔️ 6. null 사용(undefined 반환 금지)

렌더링할 내용이 없을 때는 `null`을 반환하여 렌더링을 방지해야 합니다. 또한, `undefined`를 반환하면 리액트에서 오류가 발생할 수 있으므로, 이러한 경우에는 항상 null을 반환하는 것이 안전합니다.

const value = undefined;

// 'value'가 정의되지 않은 경우, 'Default value'를 출력합니다.
return <div>{value !== undefined ? value : 'Default value'}</div>;

// 혹은 렌더링할 내용이 아예 없을 경우
return null;  // 아무것도 렌더링하지 않음

✔️ 7. 스타일 객체

JSX에서 스타일을 직접 지정할 때는 객체 형태로 작성하며, 속성은 카멜 표기법(camelCase)을 사용합니다.

const style = { backgroundColor: 'blue', fontSize: '16px' };
return <div style={style}>Styled Text</div>;

✔️ 8. className 사용

JSX에서는 JavaScript의 예약어인 `class` 대신 `className`을 사용하여 CSS 클래스를 지정합니다.

return <div className="container">Content</div>;

✔️ 9. 셀프 클로징 태그

홀로 사용하는 태그는 반드시 닫아야 합니다. 예를 들어, `<img>`, `<input>` 태그는 셀프 클로징 형태로 작성해야 합니다.

<img src="image.png" alt="이미지 설명" />
<input type="text" />

✔️ 10. JSX와 HTML 속성 차이점

JSX에서는 몇 가지 HTML 속성이 JavaScript 예약어와 충돌하거나 다른 표기법을 사용합니다. 다음은 자주 사용하는 속성의 변경 사항입니다.

• for는 htmlFor로 사용합니다.
• onclick은 onClick으로 대소문자를 구분합니다.

✔️ 11. 이벤트 핸들링

React에서 이벤트 핸들러는 JSX 속성으로 전달되며, 함수 형태로 전달됩니다. 이벤트 이름은 camelCase를 사용합니다.

<button onClick={handleClick}>클릭하세요</button>

✔️ 12. JSX 안의 JavaScript 표현식

중괄호 `{}`를 사용하여 JavaScript 표현식을 포함할 수 있습니다.

const name = 'React';
return <h1>{name.toUpperCase()} 배우기</h1>;

✔️ 13. 키 (Key) 속성

배열 렌더링 시,각 요소에 고유한 key 속성을 제공해야 합니다. 

const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
return <ul>{listItems}</ul>;

✔️ 14. PropTypes와 DefaultProps

`PropTypes`와 `DefaultProps`는 리액트 컴포넌트에서 props의 타입을 검증하고, props가 전달되지 않았을 때의 기본값을 설정하는 데 사용됩니다.

import PropTypes from 'prop-types';

function MyComponent({ name }) {
  return <h1>{name}</h1>;
}

// PropTypes로 'name' prop의 타입을 문자열로 지정
MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
};

// DefaultProps로 'name' prop의 기본값 설정
MyComponent.defaultProps = {
  name: '기본 이름',
};

export default MyComponent;

✔️ 15. 컴포넌트와 대문자

React에서는 사용자 정의 컴포넌트가 대문자로 시작해야 합니다. 소문자로 시작하는 태그는 기본 HTML 태그로 인식됩니다.

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

✔️ 16. JSX 스프레드 연산자

JSX에서는 스프레드 연산자(...)를 사용하여 여러 props를 한 번에 전달할 수 있습니다.

const buttonProps = {
  className: 'primary-button',
  disabled: true
};

// 스프레드 연산자를 사용해 props 전달
function MyButton() {
  return <button {...buttonProps}>Click Me</button>;
}

export default MyButton;

✔️ 17. 인라인 조건부 JSX

간단한 조건부 렌더링을 위해 && 연산자를 사용할 수 있습니다.

const isLoggedIn = true;
return (
  <div>
    {isLoggedIn && <p>로그인 되었습니다!</p>}
  </div>
);