v19.2Latest

JSX에서 중괄호를 사용한 JavaScript

JSX를 사용하면 JavaScript 파일 안에 HTML과 같은 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 곳에 유지할 수 있습니다. 때로는 해당 마크업 안에 약간의 JavaScript 로직을 추가하거나 동적 속성을 참조하고 싶을 수 있습니다. 이 경우 JSX에서 중괄호를 사용하여 JavaScript로의 창을 열 수 있습니다.

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

따옴표를 사용하여 문자열 전달하기

문자열 속성을 JSX에 전달하려면 작은따옴표나 큰따옴표로 감싸면 됩니다:

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

하지만 src나 alt텍스트를 동적으로 지정하려면 어떻게 해야 할까요?따옴표 "와 "를 {와 }로 바꿔 JavaScript 값을 사용할 수 있습니다:

이미지를 둥글게 만드는 CSS 클래스 이름인className="avatar"와 "avatar", 그리고 src={avatar}가 avatar라는 JavaScript 변수의 값을 읽는 것의 차이점을 확인하세요. 중괄호를 사용하면 마크업 안에서 바로 JavaScript를 사용할 수 있기 때문입니다!

중괄호 사용하기: JavaScript 세계로의 창

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

값을 name에서 'Gregorio Y. Zara'에서'Hedy Lamarr'로 변경해 보세요. 목록 제목이 어떻게 바뀌는지 보이시나요?

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

중괄호를 사용할 수 있는 위치

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 및 기타 객체

문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에서 객체를 전달할 수도 있습니다. 객체도 중괄호로 표시됩니다(예:{ name: "Hedy Lamarr", inventions: 5 }). 따라서 JSX에서 JS 객체를 전달하려면 객체를 또 다른 중괄호 쌍으로 감싸야 합니다:person={{ name: "Hedy Lamarr", inventions: 5 }}.

JSX에서 인라인 CSS 스타일을 사용할 때 이를 볼 수 있습니다. React는 인라인 스타일을 사용하도록 요구하지 않습니다(대부분의 경우 CSS 클래스가 잘 작동합니다). 하지만 인라인 스타일이 필요할 때는 객체를style속성에 전달합니다:

다음 값들을 변경해 보세요:backgroundColor와 color.

이렇게 작성하면 중괄호 안에 있는 JavaScript 객체를 실제로 볼 수 있습니다:

다음에 JSX에서{{와 }}를 보면, 그것은 JSX 중괄호 안에 있는 객체에 불과하다는 것을 알게 될 것입니다!

주의사항

인라인style속성은 카멜 케이스(camelCase)로 작성됩니다. 예를 들어, HTML의<ul style="background-color: black">는 컴포넌트에서<ul style={{ backgroundColor: 'black' }}>로 작성됩니다.

JavaScript 객체와 중괄호를 더 재미있게 사용하기

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

이 예제에서,personJavaScript 객체는name 문자열과 theme객체를 포함합니다:

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

JSX는 JavaScript를 사용하여 데이터와 로직을 구성할 수 있게 해주기 때문에 템플릿 언어로서 매우 간결합니다.

요약

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

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

도전 과제를 시도해 보세요

Challenge 1 of 3:실수 고치기 #

이 코드는 Objects are not valid as a React child라는 오류와 함께 충돌합니다:

문제를 찾을 수 있나요?

上一篇JSX로 마크업 작성하기下一篇컴포넌트에 Props 전달하기