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

+ Recent posts