JSX를 사용하면 JavaScript 파일에 HTML 마크업 뿐만 아니라 비즈니스 로직도 작성할 수 있습니다.

export default function CourseItem(props) {
  
  **const isEmpty = true;

  if (isEmpty) {
    return (
      <p>강의가 없습니다.</p>
    )
  }**

  return (
    <article className="course">
      <img className="course__img" src="./img/htmlcss.png" alt="" />
      <div className="course__body">
        <div className="course__title">입문자를 위한, HTML&CSS 웹 개발 입문</div>
        <div className="course__description">웹 개발에 필요한 기본 지식을 배웁니다. </div>
      </div>
    </article>
  );
}

뿐만 아니라 JSX 내부 마크업에서 자바스크립트 변수 및 로직을 사용할 수 있습니다. 이때 JSX에서 중괄호({})를 사용하여 JavaScript를 사용할 수 있습니다.

속성에 문자열 전달

JSX에서 엘리먼트 속성에 문자열을 전달하기 위해서는 작은따옴표나 큰따옴표로 묶어야 합니다.

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="<https://i.imgur.com/7vQD0fPs.jpg>"
      alt="Gregorio Y. Zara"
    />
  );
}

그러나 JSX에서 src 또는 alt와 같은 속성에 자바스크립트 변수를 활용하여 동적으로 문자열을 전달하려면 중괄호({})를 사용하여 전달할 수 있습니다.

export default function Avatar() {
  const avatar = '<https://i.imgur.com/7vQD0fPs.jpg>';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      **src={avatar}
      alt={description}**
    />
  );
}

위에서 className="avatar" Class 이름과 src={avatar} 자바스크립트 변수는 다른 값입니다.

실습

• src/components/course/CourseItem.jsx

마크업내에서 자바스크립트 사용

JSX는 자바스크립트를 작성하는 특별한 방법입니다. 그리고 중괄호 {}를 사용하면 마크업 내에서 자바스크립트를 사용할 수 있습니다.

export default function TodoList() {
  const name = 'Gregorio Y. 54654Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

중괄호를 사용하는 곳