728x90
✅ JSX는 HTML과 매우 유사합니다.
하지만 다른 점이 몇가지 존재하는데 이는 꼭 알아두어야 하니 알아보도록 합시다!
✏️ label, input 태그 연결
만약 HTML에서 label과 input을 연결하여 label을 클릭했을 때 input에 커서가 가도록 하고 싶다면
label엔 for 속성을 input엔 id 속성을 주어 연결하면 됩니다.
<div>
<h1>Super Converter</h1>
<label for="minutes">Minutes</label>
<input id="minutes" type="number" placeholder="Minutes" />
<label for="hours">Hours</label>
<input id="hours" type="number" placeholder="Hours" />
</div>하지만 위의 문법은 JSX에서는 틀린 문법입니다.
✅ JSX에서 틀린 문법
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
return (
<div>
<h1>Super Converter</h1>
<label for="minutes">Minutes</label>
<input id="minutes" type="number" placeholder="Minutes" />
<label for="hours">Hours</label>
<input id="hours" type="number" placeholder="Hours" />
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>위와 같이 코드를 작성했을 경우 틀린 문법이 됩니다.
하지만 아무런 오류를 확인할 수 없는데 이는 react를 production 버전으로 사용하고 있기 때문입니다.
버전을 development 버전을 사용한다면 콘솔에 오류가 발생한 것을 확인할 수 있습니다.
이러한 오류가 발생하는데 오류를 살펴보면
DOM에서 사용하는 for 속성은 유효하지 않다. htmlFor를 말하는거냐?
라는 의미입니다.
즉, for 속성 대신 JSX에서는 htmlFor을 사용해야 합니다.
🚨 오류 발생 원인
JSX는 JavaScript에서 확장된 문법이며
JavaScript에서는 for를 반복문으로 사용하기 때문에 DOM 조작에서는 구분을 해주어야 합니다.
마찬가지로 class도 JavaScript에서 사용하는 예약어이기 때문에 사용이 불가합니다.
JSX에서는 className으로 사용할 수 있습니다.
✅ JSX에서 올바른 문법
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
function App() {
return (
<div>
<h1 className="hi">Super Converter</h1>
<label htmlFor="minutes">Minutes</label>
<input id="minutes" type="number" placeholder="Minutes" />
<label htmlFor="hours">Hours</label>
<input id="hours" type="number" placeholder="Hours" />
</div>
);
}
ReactDOM.render(<App />, root);
</script>
</html>위와 같이 사용하면 정상적으로 class와 for, id 속성을 사용할 수 있습니다!
728x90
'이론 (Front-end) > React' 카테고리의 다른 글
| [React] select 태그를 통한 컴포넌트 제어 (0) | 2023.07.12 |
|---|---|
| [React] input 값 사용하기 (0) | 2023.06.14 |
| [React] State 사용하기 (0) | 2023.05.16 |
| [React] React 사용해보기 (0) | 2023.04.25 |
| [React] React.js를 배우는 이유(Vue.js와 비교) (0) | 2023.04.18 |