icon안동민 개발노트

JSX 문법 이해하기

 JSX(JavaScript XML)는 React에서 UI를 설계할 때 사용하는 JavaScript의 확장 문법입니다.

 우리는 JSX를 통해 더 직관적이고 효율적으로 컴포넌트를 작성할 수 있습니다.

JSX의 개념과 필요성

 JSX는 JavaScript 코드 안에 HTML과 유사한 마크업을 작성할 수 있게 해주는 문법입니다.

 React에서 JSX를 사용하는 주요 이유는 다음과 같습니다.

  1. 가독성 : UI 구조를 시각적으로 더 쉽게 이해할 수 있습니다.
  2. 작성 용이성 : HTML과 유사한 구문으로 컴포넌트를 쉽게 작성할 수 있습니다.
  3. 유지보수성 : 마크업과 로직을 한 곳에서 관리할 수 있어 유지보수가 쉬워집니다.

HTML과 JSX의 차이점

 JSX는 HTML과 유사해 보이지만, 몇 가지 중요한 차이점이 있습니다.

 1. 클래스 속성 : HTML의 class 속성은 JSX에서 className으로 사용됩니다.

// HTML
<div class="container">...</div>
 
// JSX
<div className="container">...</div>

 2. 스타일 속성 : JSX에서는 스타일을 객체로 전달합니다.

// HTML
<div style="color: red; font-size: 16px;">Hello</div>
 
// JSX
<div style={{ color: 'red', fontSize: '16px' }}>Hello</div>

 3. 셀프 클로징 태그 : JSX에서는 모든 태그를 명시적으로 닫아야 합니다.

// HTML
<img src="image.jpg" alt="An image">
 
// JSX
<img src="image.jpg" alt="An image" />

JSX에서 JavaScript 표현식 사용하기

 JSX 내에서 중괄호 {} 를 사용하여 JavaScript 표현식을 삽입할 수 있습니다.

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

 이는 변수, 함수 호출, 연산 등 모든 유효한 JavaScript 표현식에 적용됩니다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
 
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
 
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX의 규칙과 제한사항

  1. 단일 루트 요소 : JSX 표현식은 반드시 하나의 부모 요소로 감싸져 있어야 합니다.
// 잘못된 예
const element = (
  <h1>Hello</h1>
  <p>World</p>
);
 
// 올바른 예
const element = (
  <div>
    <h1>Hello</h1>
    <p>World</p>
  </div>
);
  1. JavaScript 예약어 : class, for 등의 예약어 대신 className, htmlFor를 사용해야 합니다.
  2. 속성 이름 : 속성 이름은 camelCase로 작성합니다 (예 : onClick, tabIndex).
  3. 조건부 렌더링 : JSX 내에서 조건부 렌더링을 위해 삼항 연산자나 논리 연산자를 사용할 수 있습니다.
const element = (
  <div>
    {isLoggedIn ? (
      <UserGreeting />
    ) : (
      <GuestGreeting />
    )}
  </div>
);

JSX가 React 요소로 변환되는 과정

 JSX는 실제로 React.createElement() 함수 호출로 변환됩니다.

 이 코드는

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

 다음과 같이 변환됩니다.

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

 이 과정은 Babel과 같은 도구에 의해 자동으로 수행되며, 개발자가 직접 신경 쓸 필요는 없습니다.

JSX 사용 예제

 다음은 JSX를 사용한 간단한 React 컴포넌트의 예입니다.

function Welcome(props) {
  return (
    <div className="welcome-container">
      <h1>Welcome, {props.name}!</h1>
      <p>It's {new Date().toLocaleDateString()} today.</p>
      {props.isSpecialDay && (
        <span className="special-message">Happy special day!</span>
      )}
    </div>
  );
}

 이 예제에서 우리는 다음과 같은 JSX 문법을 사용했습니다.

  • className을 사용하여 CSS 클래스를 지정했습니다.
  • 중괄호 {}를 사용하여 JavaScript 표현식 (props와 날짜)을 삽입했습니다.
  • 조건부 렌더링을 위해 && 연산자를 사용했습니다.

 JSX는 React 개발의 중심이 되는 문법으로, UI 구조를 직관적으로 표현할 수 있게 해줍니다.

 HTML과 유사하면서도 JavaScript의 강력함을 활용할 수 있어, 복잡한 UI 로직을 간결하게 작성할 수 있습니다.

 JSX를 통해 개발자는 마크업과 로직을 하나의 파일에서 관리할 수 있어, 컴포넌트 기반 개발의 이점을 최대한 활용할 수 있습니다.

이전으로다음으로