React - JSX에서 자바스크립트 사용하기

JSX를 사용하면 JS 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 곳에 놓을 수 있다.

JSX에서 자바스크립트 사용하는 방법

1. 따옴표로 문자열 전달하기

• 문자열 어트리뷰트를 JSX에 전달하려면 작은따옴표나 큰따옴표로 묶어야 한다.

return React.createElement(
  "img",
  {
    className: "avatar",
    src: "https://i.imgur.com/7vQD0fPs.jpg",
    alt: "Gregorio Y. Zara",
  }
);

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

• src나 alt를 동적으로 지정하기 위해서 따옴표를 { }로 바꿔 JS값을 사용 가능

<img className="avatar" src={avatar} alt={description} />

2. 중괄호 사용하기

• 아래와 같은 함수 호출을 포함해 모든 JS 표현식은 중괄호 사이에서 작동함.

<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>
  );
}

이중 중괄호 - JSX에서 객체 전달하는 방법

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'red',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

• 인라인 style 프로퍼티는 캐멀 케이스 로 작성

여러 표현식을 하나의 객체로 옮기고 중괄호 안의 JSX에서 참조할 수도 있다

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

• JSX에서 표현식이란 :
  {person.name}, {person.theme}, "black" 같은 값들, {someFunction()} 같은 계산 결과

<div style={{ backgroundColor: 'black', color: 'pink' }}>
  <h1>{'Gregorio Y. Zara'}'s Todos</h1>
</div>

• 이렇게 표현할 수 있는 것을 객체로 옮긴다 는 것은 JSX 안에 직접 쓰던 값들을 JS 영역에 객체로 빼서 정리한다는 뜻

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

• 이후에 중괄호를 이용해서 JSX에서 참조하면 된다