ReactReactReact docs beta 한글 번역 : JavaScript in JSX with Curly Braces- 중괄호를 사용한 JSX의 자바스크립트

UI 묘사 : 중괄호를 사용한 JSX의 자바스크립트

JSX를 사용하면 JavaScript 파일 내에 HTML과 유사한 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 위치에 유지할 수 있습니다. 때로는 마크업 안에 약간의 자바스크립트 로직을 추가하거나 동적 프로퍼티를 참조하고 싶을 때가 있습니다. 이 경우 JSX에서 중괄호를 사용하여 자바스크립트 창을 열 수 있습니다.

 

학습 내용은 다음과 같습니다.

• 따옴표로 문자열을 전달하는 방법
• 중괄호를 사용하여 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"
    />
  );
}

 

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

하지만 src 또는 대체 텍스트를 동적으로 지정하려면 어떻게 해야 할까요? " 및 "을 { 및 }으로 대체하여 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}
    />
  );
}

 

이미지를 둥글게 만드는 "아바타" CSS 클래스명을 지정하는 className="avatar"와, 

아바타라는 자바스크립트 변수의 값을 읽는 src={avatar}의 차이점을 주목하세요. 중괄호를 사용하면 마크업에서 바로 자바스크립트로 작업할 수 있기 때문입니다!

 

중괄호 사용하기: 자바스크립트 세계로 들어가는 창 

JSX는 JavaScript를 작성하는 특별한 방법입니다. 즉, 중괄호 { }를 사용하여 그 안에 JavaScript를 사용할 수 있습니다. 아래 예제에서는 먼저 과학자의 이름인 name을 선언한 다음 <h1> 안에 중괄호로 묶어 삽입합니다:

 

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

 

이름 값을 'Gregorio Y. Zara'에서 'Hedy Lamarr'로 변경해 보세요. 할 일 목록 제목이 어떻게 바뀌는지 보시나요? 중괄호 사이에는 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 내에서 두 가지 방법으로만 사용할 수 있습니다:

JSX 태그 안에 직접 텍스트로 사용: <h1>{name}의 할 일 목록</h1>은 작동하지만 <{tag}>Gregorio Y. Zara의 할 일 목록</{tag}>은 작동하지 않습니다.

기호 바로 뒤에 오는 속성: src={avatar}는 아바타 변수를 읽지만, src="{avatar}"는 문자열 "{avatar}"를 전달합니다.

 

"이중 중괄호" 사용: JSX의 CSS 및 기타 객체 

문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX로 객체를 전달할 수도 있습니다. 객체도 중괄호로 표시할 수 있습니다. (예: { name: "Hedy Lamarr", inventions: 5 }. 

따라서 JSX에서 JS 객체를 전달하려면 다른 중괄호 쌍으로 객체를 감싸야 합니다
(person={{ name: "Hedy Lamarr", inventions: 5 }}.

JSX의 inline CSS 스타일에서 이 문제를 볼 수 있습니다. React에서는 인라인 스타일을 사용할 필요가 없습니다(대부분의 경우 CSS 클래스가 잘 작동합니다). 하지만 인라인 스타일이 필요한 경우 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>
  );
}

배경색과 색의 값을 변경해 보세요.

이렇게 작성하면 중괄호 안에 자바스크립트 객체가 실제로 보이는 것을 확인할 수 있습니다:

 

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

 

다음에 JSX에서 {{ and }}를 볼 때, 이는 JSX 중괄호 내부의 객체일 뿐이라는 점을 기억하세요!

 

함정

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

 

자바스크립트 객체와 중괄호를 더 재미있게 사용하기 

여러 표현식을 하나의 객체로 이동하고 중괄호 안에서 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 JavaScript 객체에는 name 문자열과 theme 객체가 포함되어 있습니다.

컴포넌트는 다음과 같이 person의 값을 사용할 수 있습니다:

 

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

 

 

JSX는 JavaScript를 사용하여 데이터와 로직을 구성할 수 있기 때문에 템플릿 언어로서 매우 최소한의 기능을 제공합니다.

 

요약

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

• 따옴표 안의 JSX 속성은 문자열로 전달됩니다.
• 중괄호를 사용하면 JavaScript 로직과 변수를 마크업으로 가져올 수 있습니다.
• 중괄호는 JSX 태그 콘텐츠 내부 또는 속성의 = 바로 뒤에서 작동합니다.
• {{ 와 }}는 특별한 구문이 아니라 JSX 중괄호 안에 들어 있는 JavaScript 객체입니다.

 

발표 요약)

중괄호 {} 를 통해 변수와 JS로직을 가져올 수 있다.
* 이중 중괄호 {{ }} 는, 중괄호 안에 들어있는 JS 객체다.