중괄호가 있는 JSX 안에서 자바스크립트 사용하기

JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 곳에 놓을 수 있습니다. 때로는 JavaScript 로직을 추가하거나 해당 마크업 내부의 동적인 프로퍼티를 참조하고 싶을 수 있습니다. 이 상황에서는 JSX에서 중괄호를 사용하여 JavaScript를 사용할 수 있습니다.

학습 내용

  • 따옴표로 문자열을 전달하는 방법
  • 중괄호가 있는 JSX 안에서 JavaScript 변수를 참조하는 방법
  • 중괄호가 있는 JSX 안에서 JavaScript 함수를 호출하는 방법
  • 중괄호가 있는 JSX 안에서 JavaScript 객체를 사용하는 방법

따옴표로 문자열 전달하기

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

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

Error

Extra 185 of 186 byte(s) found at buffer[1]

여기에서는 "https://i.imgur.com/7vQD0fPs.jpg""Gregorio Y. Zara"가 문자열로 전달되고 있습니다.

그러나 src 또는 alt를 동적으로 지정하려면 어떻게 해야 할까요? ""{}로 바꿔 JavaScript의 값을 사용할 수 있습니다.

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

Error

Extra 185 of 186 byte(s) found at buffer[1]

이미지를 둥글게 만드는 "avatar" CSS 클래스 이름을 지정하는 className="avatar"avatar라는 JavaScript 변수의 값을 읽는 src={avatar}의 차이점에 주목해야 합니다. 중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있기 때문입니다.

중괄호 사용하기: JavaScript 세계로 연결하는 창

JSX는 JavaScript를 작성하는 특별한 방법입니다. 중괄호 { } 사이에서 JavaScript를 사용할 수 있습니다. 아래 예시는 name을 선언한 다음 <h1> 내부에 중괄호로 포함합니다.

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

Error

Extra 185 of 186 byte(s) found at buffer[1]

name 값을 'Gregorio Y. Zara'에서 'Hedy Lamarr'로 변경해 To Do List 제목이 어떻게 변경되는지 확인해봅시다.

formatDate()와 같은 함수 호출을 포함해 모든 JavaScript 표현식은 중괄호 사이에서 작동합니다.

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 안에서 중괄호는 두 가지 방법으로만 사용할 수 있습니다.

  1. JSX 태그 안의 문자: <h1>{name}'s To Do List</h1>는 작동하지만, <{tag}>Gregorio Y. Zara's To Do List</{tag}>는 작동하지 않습니다.
  2. = 바로 뒤에 오는 어트리뷰트: src={avatar}avatar 변수를 읽지만 src="{avatar}""{avatar}" 문자열을 전달합니다.

”이중 중괄호” 사용하기: JSX의 CSS와 다른 객체

JSX에는 문자열, 숫자 및 기타 JavaScript 표현식뿐만 아니라 객체를 전달할 수도 있습니다. 또한 객체는 { name: "Hedy Lamarr", inventions: 5 }처럼 중괄호로 표시됩니다. 따라서 JSX에서 객체를 전달하려면 person={{ name: "Hedy Lamarr", inventions: 5 }}와 같이 다른 중괄호 쌍으로 객체를 감싸야 합니다.

JSX의 인라인 CSS 스타일에서도 볼 수 있습니다. React에서 인라인 스타일을 사용할 필요가 없습니다(CSS class는 대부분 잘 작동합니다). 그러나 인라인 스타일이 필요할 때 style 어트리뷰트에 객체를 전달해야 합니다.

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

backgroundColorcolor 값을 변경해 보세요.

아래와 같이 작성할 때 중괄호 안에 JavaScript 객체를 볼 수 있습니다.

<ul style={
{
backgroundColor: 'black',
color: 'pink'
}
}>

JSX에서 {{}} 를 본다면 JSX 중괄호 안의 객체에 불과하다는 것을 알아야 합니다.

주의하세요!

인라인 style 프로퍼티는 캐멀 케이스로 작성됩니다. 예를 들어 HTML에서의 <ul style="background-color: black">은 컴포넌트에서 <ul style={{ backgroundColor: 'black' }}>로 작성됩니다.

JavaScript 객체와 중괄호에 대해서 더 알아보기

여러 표현식을 하나의 객체로 옮기고 중괄호 안의 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>
  );
}

이 예시에서 person 객체는 name 문자열과 theme 객체를 포함합니다.

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

컴포넌트는 person 값을 아래와 같이 사용할 수 있습니다.

<div style={person.theme}>
<h1>{person.name}'s Todos</h1>

JSX는 JavaScript를 사용하여 데이터와 논리를 구성할 수 있는 매우 작은 템플릿 언어입니다.

요약

이제 JSX에 대한 거의 모든 것을 알게 되었습니다.

  • 따옴표 안의 JSX 어트리뷰트는 문자열로 전달됩니다.
  • 중괄호를 사용하면 JavaScript 논리와 변수를 마크업으로 가져올 수 있습니다.
  • JSX 태그 내부 또는 어트리뷰트의 = 뒤에서 작동합니다.
  • {{}} 는 특별한 문법이 아닙니다. JSX 중괄호 안에 들어 있는 JavaScript 객체입니다.

챌린지 1 of 3:
실수 고치기

아래 코드는 Objects are not valid as a React child라는 오류가 발생합니다.

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

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'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>
  );
}

문제를 찾았나요?