JSX란?
자바스크립트(JS) 에 XML / HTML 기능을 추가한 것으로 A syntax extension to JavaScript (자바스크립트 확장 문법) 이라고 한다. 사실 JSX는 필수가 아니다. createElement() 라는 함수를 이용해서 구현을 할 수 있으나, 그래도 후술할 장점들 때문에 JSX가 많이 권장되는 편이다.
JSX 장점
- 간결한 코드
- 가독성 향상
- 버그 발견 쉬움
- Injection Attacks 해킹 방어
사용법
- 모든 자바스크립트 문법 사용 가능
- 태그의 속성에 값을 넣기 위해 큰 따옴표 사이에 문자열 넣거나
- 중괄호 사이에 자바스크립트 코드를 넣으면 됨!
- childeren 정의하는 법은 그냥 태그 안에 태그를 또 넣으면 됨
우선 지난 포스팅에서 create-react-app을 통해 만들어 놓은 애플리케이션 틀이 있을 것이다. 다음과 같이 파일과 폴더를 만든다.
import React from "react";
function Book(props) {
return (
<div>
<h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
<h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
</div>
);
}
export default Book;
Book.jsx
import React from "react";
import Book from "./Book";
function Library(props) {
return (
<div>
<Book name="책이름 파이썬" numOfPage={300} />
<Book name="책이름 AWS" numOfPage={400} />
<Book name="책이름 리액트" numOfPage={500} />
</div>
);
}
export default Library;
Library.jsx
다음과 같이 Book 에 속한 태그들을 Library에서 설정한 것처럼 나열한다.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Library from './chapter_03/Library';
ReactDOM.render(
<React.StrictMode>
<Library />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
index.js에 와서 chapter 폴더 속 Library.jsx를 불러와서 ReactDOM에 랜더링해서 화면에 보여주게 한다.
터미널에서 npm start를 치면 브라우저가 열리고 localhost:3000 주소로 페이지를 보여준다.
(단 주의해야 할 점이 터미널에서 npm start 명령어를 칠 경우 package-json 파일이 있는 폴더의 상위 페이지에서 입력해야 한다. 만약 다른 경로에 있을 경우 cd 명령어로 경로를 설정해주면 된다.)
랜더링한 화면을 볼 수 있다.
'React' 카테고리의 다른 글
[React] State and Lifecycle (0) | 2024.08.03 |
---|---|
[React] Components 와 Props (0) | 2024.08.01 |
[React] Rendering Elements (0) | 2024.07.31 |
[React] create-react-app (0) | 2024.07.29 |
[React] React 란? & 연동하기 (0) | 2024.07.29 |