
📌 JSX 규칙
1. 하나의 루트 엘리먼트로 반환하기
하나의 컴포넌트에서는 반드시 하나의 부모 요소만 반환해야 한다.
JSX에서는 다음과 같이 감싸줘야 한다.
<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 비슷하게 쓰는 것"처럼 보이지만,
엄연히 자바스크립트이기 때문에 문법이 훨씬 더 엄격하고 디테일하다.
처음엔 실수하기 쉬운 포인트들이지만, 오류 메시지 하나하나가 배우는 포인트였다.
'Frontend > React' 카테고리의 다른 글
| Zustand 그냥 쓰면 생기는 리렌더링 문제와 해결 방법 (0) | 2025.12.14 |
|---|---|
| [React] React Props 흐름 - 개념 정리부터 실습 회고까지 (2) | 2025.07.04 |
| [React] 리액트 공식 문서 챌린지로 익히는 컴포넌트 import/export 흐름 (1) | 2025.07.02 |
| [React]컴포넌트 첫 걸음: 공식문서 챌린지로 개념 잡기 (1) | 2025.06.27 |
| 페이지 라우팅 (0) | 2025.02.05 |