안녕하세요 YB 김린아입니다.
이번 아티클 주제는 3주차 리액트를 학습하며 알게된 JSX입니다.
JSX가 무엇인지, 사용되는 이유가 무엇인지, 그리고 대표적인 문법 규칙에 대해 정리해보았습니다.
1. JSX란
JSX는 JavaScript XML(eXtensible Markup Language)의 약자로 JS에 XML을 추가한 확장된 문법이다. React에서 UI를 표현하기 위해 사용되고, 리액트 사용시 JSX는 HTML과 JS를 모두 포함하고 있는 컴포넌트를 생성한다. JSX는 브라우저에서 직접 실행되지 않아 JSX코드를 자바스크립트 코드로 변환해주는 도구가 필요하다.
2. JSX의 장점
- JSX의 대표적인 장점은 보기 쉽고 익숙하다는 것이다. HTML 코드와 유사하여 일반 자바스크립트만 사용한 코드보다 더 익숙하고 간결하여 가독성이 좋다. 그리고 높은 활용도를 가지고 있는데, div, span과 같은 HTML 태그를 사용할 수 있으며 개발자가 만든 컴포넌트도 JSX 내부에서 작성이 가능하다.
- Injection Attacks을 방어함으로써 보완성이 향상된다. Injection Attacks는 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스코드를 입력하여 해당 코드가 실행되도록 만드는 방법이다.
3. 문법 규칙
1. 하나 이상의 요소가 있을 경우 부모 요소로 감싸는 형태여야 한다.
function App() {
return (
<div>
<div>Hello!</div>
<div>World!</div>
</div>
)
}
2. 자바스크립트 표현식 사용 : 코드를 {}로 감싸준다.
import React from 'react';
function App(){
const name = 'react';
return(
<>
<h1>Hello! {name}</h1>
<h2>Is it working well?</h2>
<>
)
3. 조건 연산자를 사용한다:
if문/for루프는 JS표현식이 아니기 때문에 JSX 내부의 자바스크립트 표현식에서 사용할 수 없다. 따라서 JSX 외부에서 if문을 사용하거나 {}안에서 조건부 연산자를 사용한다.
4. CamelCase 표기법을 사용한다.
5. class 대신 className을 사용한다:
일반 HTML에서 CSS클래스를 사용할 때는 class 라는 속성을 사용하지만, JSX에서는 className을 사용한다.
<body>
<div id ="root"></div>
<style>
.title{
color: steelblue;
}
</style>
<script type="text/babel">
const rootElement = document.querySelector("#root");
const subject = "React"
const 클래스이름 = "title";
const 사용자정의태그 = <h1 className = {클래스이름}>{subject}</h1>;
ReactDOM.createRoot(rootElement).render(사용자정의태그);
</script>
</body>
6. 인라인 스타일 적용시 객체를 사용한다.
7. 반드시 태그는 닫혀야 한다:
<div>, <p>, <span>, <a> 같이 짝이 있는 태그와 <img/>, <input/>, <br/> 같은 단독 태그(self-closing tag) 모두 태그를 닫아줘야 하며, 그렇지 않을 경우 에러가 발생한다.
'3주차' 카테고리의 다른 글
| [React] Custom Hook (0) | 2024.11.01 |
|---|---|
| [React] useEffect 훅과 의존성 배열 (0) | 2024.11.01 |
| 리액트 컴포넌트의 Lifecycle (0) | 2024.11.01 |
| 패키지 Manager~ 그게뭘까? (0) | 2024.10.30 |
| 리액트가 처음인 당신께... (3) | 2024.10.29 |
