Chapter 1. Describing the UI

#4 JSX에서 JavaScript 사용하기

학습 목차

1. 따옴표로 문자열 전달하기
2. 중괄호 사용하기: JavaScript 세계를 들여다보는 창
3. “이중 중괄호” 사용: JSX 내에서의 CSS 및 다른 객체
4. JavaScript 객체와 중괄호로 더 재미있게 즐기기

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

• JSX에 문자열 속성을 전달하려면, 작은따옴표 또는 큰따옴표로 묶는다.

// 예시

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

• 이미지를 둥글게 만들어주는 "avatar" CSS 클래스명 className="avatar"와 아바타라는 JavaScript 변수의 값을 읽는 src={avatar}의 차이점은 중괄호를 사용하면 마크업에서 바로 JavaScript로 작업할 수 있기 때문이다.

2. 중괄호 사용하기: JavaScript 세계를 들여다보는 창

• JSX는 중괄호 { } 안에서 JavaScript를 사용할 수 있다는 의미이다.

2-1. 중괄호 사용 위치

• JSX 태그 안에 직접 텍스트로 사용
• = 기호 바로 뒤에 오는 속성

3. “이중 중괄호” 사용: JSX 내에서의 CSS 및 다른 객체

• 문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX로 객체를 전달할 수도 있다.
  객체는 중괄호로 표시할 수도 있다.
  • 예: { name: "Hedy Lamarr", inventions: 5 }
    따라서 JSX에서 JS 객체를 전달하려면 다른 중괄호 쌍으로 객체를 감싸야 한다.
    person={{ name: "Hedy Lamarr", inventions: 5 }}
• JSX의 인라인 CSS 스타일에서 이것을 볼 수 있다.
  React에서는 인라인 스타일을 사용할 필요가 없다.
  대부분의 경우 CSS 클래스가 잘 작동한다.
• 하지만 인라인 스타일이 필요한 경우 style 어트리뷰트에 객체를 전달한다.

주의

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

4. JavaScript 객체와 중괄호로 더 재미있게 즐기기

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

요약

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

React 공식 문서

https://react.dev/

React 비공식 번역 문서

https://react-ko.dev/

MDN

https://developer.mozilla.org/ko/