React – JSX와 렌더링 – JSX 문법 – 3 – 주의해야 할 문법 오류 및 경고
안녕하세요 여러분! 😊
React에서 JSX를 사용할 때, 처음 접하시는 분들이 자주 겪는 문법 오류와 경고 메시지들에 대해 오늘은 깔끔하게 정리해드릴게요!
JSX는 HTML처럼 보이지만, 사실은 JavaScript 문법 안에서 돌아가기 때문에 미묘한 차이로 오류가 나기 쉬워요.
마치 외국어를 처음 배울 때 띄어쓰기 하나로 뜻이 달라지는 것처럼요!
1. 꼭 닫아야 하는 태그 (Self-closing)
JSX에서는 모든 태그가 반드시 닫혀 있어야 합니다.
❌ 잘못된 예
const element = <img src="logo.png">✅ 올바른 예
const element = <img src="logo.png" />✔ HTML에서는 생략이 가능했던 태그들도 JSX에선 절대 생략하면 안 돼요!
대표적으로<img>,<input>,<br>,<hr>,<xss-meta>등!
2. class 대신 className 사용
JSX는 JavaScript 문법을 따르기 때문에, class는 예약어로 사용할 수 없어요.
❌ 오류 발생
<div class="container">Hello</div>✅ 정답
<div className="container">Hello</div>🧠
for속성도 마찬가지로htmlFor로 바꿔야 해요!
3. 여러 태그는 반드시 하나로 감싸야 함
JSX에서는 여러 요소를 반환할 수 없고, 반드시 하나의 부모 요소로 감싸야 해요.
❌ 오류 발생
return (
<h1>안녕</h1>
<p>반가워요!</p>
);✅ 방법 1: <div>로 감싸기
return (
<div>
<h1>안녕</h1>
<p>반가워요!</p>
</div>
);✅ 방법 2: <></> Fragment 사용
return (
<>
<h1>안녕</h1>
<p>반가워요!</p>
</>
);✅
<></>는 추가적인 DOM 요소 없이 묶어줄 수 있는 가벼운 문법이에요!
4. 표현식은 {} 안에만 넣기
JSX에서는 JavaScript 표현식을 직접 넣을 수 있지만, 반드시 중괄호 {} 안에만 넣어야 해요.
❌ 오류 발생
const name = '길동';
const element = <p>"안녕하세요," + name</p>;✅ 정답
const name = '길동';
const element = <p>안녕하세요, {name}</p>;5. return문 줄바꿈 주의 (세미콜론 자동 삽입)
JSX를 return할 때 줄바꿈이 잘못되면 JavaScript가 세미콜론을 자동으로 삽입해 오류가 발생할 수 있어요.
❌ 의도치 않게 undefined 반환
return
<h1>안녕하세요</h1>;➡️ return;으로 인식되어 아무 것도 렌더링되지 않음
✅ 괄호로 감싸기
return (
<h1>안녕하세요</h1>
);⚠️ JSX를 반환할 땐 항상 괄호
()로 감싸주는 습관을 들이세요!
6. key 경고 (리스트 렌더링 시)
map()으로 반복할 때, 각 요소에 고유한 key 속성을 지정하지 않으면 경고가 발생해요.
❌ 경고 발생
{items.map(item => <li>{item}</li>)}✅ 정답
{items.map((item, index) => <li key={index}>{item}</li>)}📌
key는 React가 리스트 항목을 효율적으로 비교하고 업데이트하기 위한 기준입니다.
가능하면id같은 고유값을 사용하세요.
7. 잘못된 속성 이름
HTML에서 사용하는 속성명과 JSX에서의 속성명이 다를 수 있어요.
| HTML 속성 | JSX 속성 |
|---|---|
class |
className |
for |
htmlFor |
tabindex |
tabIndex |
maxlength |
maxLength |
readonly |
readOnly |
예시
<input type="text" maxLength={10} readOnly />
<label htmlFor="email">이메일</label>❗ 잘못된 속성을 사용하면 경고 메시지가 콘솔에 출력되고, 일부 기능이 작동하지 않을 수 있어요!
8. 중복된 속성
하나의 태그에 같은 속성을 두 번 쓰면 나중에 작성된 값으로 덮어씌워져요. 그러나 이는 코드 가독성을 해치고 실수를 유발하므로 피해야 해요.
❌ 나쁜 예시
<input type="text" value="A" value="B" />브라우저는 동작하겠지만 코드 리뷰에서 불필요한 혼란을 줄 수 있어요.
9. 주석은 {/* */} 형식으로
JSX 안에서는 일반 JavaScript 주석(//, /* */)을 사용할 수 없고, 반드시 JSX 전용 형식으로 써야 해요.
✅ JSX 주석 방법
return (
<div>
{/* 이것은 주석입니다 */}
<p>Hello</p>
</div>
);10. boolean 속성은 축약 가능
HTML처럼 JSX에서도 disabled, checked 같은 boolean 속성은 생략이 가능해요.
<button disabled>버튼</button> // true
<button disabled={false}>버튼</button> // false단, 값이 동적으로 바뀌는 경우에는
{true}/{false}로 명시하는 것이 명확합니다.
자주 보게 될 경고 메시지들 요약
| 경고 내용 | 의미 및 해결 |
|---|---|
| “Each child in a list should have a unique ‘key’ prop.” | map으로 렌더링한 항목에 key가 없거나 중복됨 |
| “‘class’ is not a valid JSX attribute” | class 대신 className을 써야 함 |
| “Adjacent JSX elements must be wrapped in an enclosing tag” | JSX 최상위에 태그가 2개 이상이면 하나로 감싸야 함 |
| “Expected corresponding JSX closing tag” | 닫는 태그 누락, <img>, <input> 등은 /> 필요 |
| “Cannot read property of undefined” | 객체 내부 속성 접근 시, 안전한 조건 처리 필요 |
마무리하며
JSX는 HTML과 비슷해 보여도 JavaScript의 규칙을 따르는 별개의 문법이에요.
오늘 배운 내용을 알고 있으면 React 개발 중에 나오는 자잘한 에러와 경고들을 빠르게 해결할 수 있고, 실수도 줄일 수 있어요!
🔥 실무에서도 자주 마주치는 내용이니 꼭 숙지해두시고요,
다음 시간부터는 컴포넌트를 직접 만들어서 JSX를 어떻게 구조화하는지 본격적으로 배워볼게요!
함께 열심히 해봐요! 💪✨