반응형
📄 JSX란?
JavaScript에 HTML 태그를 끼얹은 문법
JSX = JavaScript + HTML
- HTML 태그 안에선 중괄호({})를 사용해서 JS를 쓸 수 있다.
- JavaScript의 공식 문법이 아니며, JavaScript의 확장 문법이다.
🖥️ 소스 코드로 이해하기
const count = 1;
const title = <h1>{count}번째 게시물</h1>
다음 코드는 title 이라는 변수에 <h1>{count}번째 게시물</h1>을 선언한 코드입니다.
즉, JavaScript 문법(const title)에 HTML 태그(<h1>)를 끼얹은 JavaScript의 확장 문법입니다.
📄 JSX의 특징
JSX에서 사용되는 태그의 속성 이름이 HTML과 조금 다름
- class -> className
- for -> htmlFor
- onclick -> onCclick
태그를 명시적으로 닫아줘야 함
하나의 태그로 감싸져 있어야 함
🖥️ 소스 코드로 이해하기
// HTML
<button class="btn">Hello, world!</button>
<input type="text">
// JSX 문법
<div>
<button className="btn">Hello, world!</button>
<input type="text" />
</div>
다음 코드는 태그의 속성이 class가 아닌 className으로 사용되었으며,
/(슬래시, slash)를 통해서 태그를 닫아주었습니다.
또한, <div>태그를 통하여 하나의 태그로 감싸져 있습니다.
📄 JSX를 사용하는 이유?
- 가독성 향상
- 선언적 프로그래밍
- React 엘리먼트를 빠르게 생성하기 위해 React에서 권장하는 문법
🖥️ 소스 코드로 이해하기
아래 두 코드는 <div> 태그 안에 <h1> 태그를 생성하는 동일한 코드입니다.
하지만 JSX를 사용해서 작성한 코드의 양이 적고 직관적임을 알 수 있습니다.
app.js
function createElement() {
const div = document.createElement('div'); //DOM을 생성하는 부분
const h1 = document.createElement('h1'); //DOM을 생성하는 부분
h1.textContent = "Hello, World!";
div.appendChild(h1); //DOM을 수정하는 부분
return div;
}
기본적으로 브라우저는 DOM을 이용하여 화면을 그려줍니다.
즉, DOM을 수동으로 생성하고 수정하는 부분에서 코드의 중복이 발생합니다.
app.jsx
function CreateElement() {
return (
<div>
<h1>Hello, World!</h1>
</div>
);
}
app.js에서 DOM을 선언하는 코드의 중복들이 제거되었습니다.
즉, 가독성 뿐만이 아니라 선언적인 코드의 중복 제거가 되었지만 선언적인 프로그래밍이 가능해졌습니다.
📄 리액트 엘리먼트(React Element)란?
리액트에서 UI를 렌더링 하기 위한 가장 작은 단위입니다.
🖥️ 소스 코드로 이해하기
const count = 1;
const title = <h1>{count}번째 게시물</h1>
다음 코드에서 title 변수에 담은 <h1> 태그를 리액트 엘리먼트라고 부릅니다.
참고: 브라우저는 JSX 문법을 알지 못합니다.
그렇기 때문에 아래 코드에서 1번 JSX 문법의 코드를 React 내부에 있는 Babel 통하여 2번 JavaScript 코드로 변환 시켜줍니다.
// 1. JSX
return <h1>Hello</h1>
// 2. JavaScript
return React.createElement('h1', null, 'Hello')
📄 리액트 리스트 엘리먼트(React List Element)란?
- 아래 코드는 map을 통하여 item 배열을 순회하여 <li> 태그를 렌더링 하는 코드입니다.
- 반복적인 React 엘리먼트를 한 줄의 코드로 매우 쉽게 작성할 수 있습니다.
function App() {
const items = ['리액트', '뷰', '앵귤러'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
📄 3항 연산자 코드
- 아래 코드는 isOpen(열린 상태)이면 <div> 태그를 렌더링 하는 코드입니다.
- 한 줄의 코드로 매우 쉽게 코드를 작성할 수 있습니다.
function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<div>
{isOpen && <div>isOpen이면 화면을 그려줘!</div>}
</div>
);
}
📝 정리
- JSX = JS + HTML
- JSX를 사용하는 이유는 코드의 가독성 향상과 선언적 프로그래밍이 가능하기 때문에 React에서 권장하는 문법
참고
반응형
'Frontend' 카테고리의 다른 글
[ React ] Uncaught TypeError: users.map is not a function 오류 해결 방법 (0) | 2024.10.14 |
---|---|
[React] Warning: Encountered two children with the same key 오류 해결 방법 (1) | 2024.10.11 |
알기 쉽게 정리한 Babel이란? 프론트엔드 개발자를 위한 웹팩 (1) | 2024.10.07 |
알기 쉽게 정리한 package.json 총 정리 : 프론트엔드 개발자를 위한 웹팩 (1) | 2024.09.29 |
Node.js와 NPM이란? 아주 쉽게 정리 (1) | 2024.09.25 |
댓글