[React] JSX 제대로 쓰는 법: 중괄호, 표현식, 객체까지 실습으로 이해하기

 

📌 JSX 규칙

1. 하나의 루트 엘리먼트로 반환하기

하나의 컴포넌트에서는 반드시 하나의 부모 요소만 반환해야 한다.
JSX에서는 다음과 같이 감싸줘야 한다.

 

 

App.js

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img
    src="https://i.imgur.com/yXOvdOSs.jpg"
    alt="Hedy Lamarr"
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

 

📍 만약 <div>를 추가하고 싶지 않다면 <>와 </>로 감싸는 Fragment 문법도 가능하다.

---

2. 모든 태그는 반드시 닫아주기

JSX는 HTML보다 엄격한 문법을 가진다.
<img> 같은 self-closing 태그도 반드시 /로 닫아야 한다.

<img src="..." alt="..." />

---

3. 대부분은 카멜케이스 사용하기

DOM 속성은 HTML과 달리 **카멜케이스(camelCase)**로 작성한다.
그리고 class는 JS 예약어라서 className으로 작성해야 한다.

<img
  src="https://i.imgur.com/yXOvdOSs.jpg"
  alt="Hedy Lamarr"
  className="photo"
/>

---

4. 문자열은 따옴표로 감싸기

문자열 속성은 반드시 따옴표(' 또는 ")로 감싼다.

alt="Gregorio Y. Zara"

 

동적으로 값을 넣고 싶을 땐 중괄호 {}를 사용한다.

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

---

 

🧠 중괄호 사용법 정리

 

👉 JSX 내부에 변수 사용하기

const name = 'silver';

<h1>{name}'s To Do List</h1>

---

👉 이중 중괄호로 객체 전달하기

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

또는 객체를 따로 선언하고

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

이렇게 사용할 수 있다:

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

---

🧪 챌린지 실습

🔧 챌린지 1: 실수 고치기 

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

 

풀이 

<h1>{person}'s Todos</h1> // ❌

 

person은 객체이므로 텍스트로 출력 불가.
{person.name}처럼 프로퍼티를 꺼내서 써야 한다:

 

<h1>{person.name}'s Todos</h1> // ✅

---

🔧 챌린지 2: 정보를 객체로 추출하기 

이미지 URL을 person 객체로 추출해보자.

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

 

풀이 

객체 안에 url로 링크를 만들어주고, return문 안에서 img의 src={person.url}로 써주면 된다.

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  },
  url: "https://i.imgur.com/7vQD0fPs.jpg",
}

<img
        className="avatar"
        src={person.url}
        alt="Gregorio Y. Zara"
      />

---

🔧 챌린지 3: JSX 중괄호 안에 표현식 작성하기 

아래 객체에서 전체 이미지 URL은 기본 URL, imageId, imageSize 및 파일 확장자 네 부분으로 나누어져 있습니다.

이미지 URL은 기본 URL (항상 '<https://i.imgur.com/'>), imageId ('7vQD0fP'), imageSize ('s') 및 파일 확장자 (항상 '.jpg')와 같은 어트리뷰트를 결합합니다. 그러나 <img> 태그가 src를 지정하는 방식에 문제가 있습니다.

어떻게 고칠 수 있을까요?

const baseUrl = 'https://i.imgur.com/';
const person = {
  name: 'Gregorio Y. Zara',
  imageId: '7vQD0fP',
  imageSize: 's',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="{baseUrl}{person.imageId}{person.imageSize}.jpg"
        alt={person.name}
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

 

풀이

+로 이어주면 된다. 

src={baseUrl + person.imageId + person.imageSize + '.jpg'}

 

---

🧠 실습 회고

문자열 + 변수 조합할 때 {} 안에 넣고 +로 이어줘야 한다는걸 이제야 확실히 알게 되었다. 이제라도 알았으니 됐다.
다음에 또 이런 문제가 있다면 까먹지 말고 써먹어야겠다. 

---

✍️ 정리하며

JSX는 그냥 "HTML 비슷하게 쓰는 것"처럼 보이지만,
엄연히 자바스크립트이기 때문에 문법이 훨씬 더 엄격하고 디테일하다.

처음엔 실수하기 쉬운 포인트들이지만, 오류 메시지 하나하나가 배우는 포인트였다.