JSX

JSX는 react 개발에 필수적으로 사용된다.

JSX란?

자바스크립트의 확장 문법

그럼 어떻게 확장한 문법일까? -> JS + XML / HTML

const element = <h1>hello, world!<h1>;
// 대입 연산자와 html코드가 결합되어 있다. 

JSX의 역할

JSX는 내부적으로 XML,HTML코드를 JS코드로 변환하는 과정을 거치게 된다.

우리가 JSX를 작성해도 최종적으로는 JS코드가 나오게 된다.

JSX를 JS로 변환하는 역할을 하는게 React의 createElement라는 함수가 그 기능을 한다.

JSX를 사용한 코드

class Hello extends React.Component { 
	render(){
    	return <div>Hello {this.props.toWhat} </div>;
    }

}

ReactDOM.render(
	<Hello thWhat= "World" />,
    document.getElementById('root')
);

ReactDOM의 render() 함수를 사용해 실제 화면에 렌더링 하고 있다.

JSX를 사용하지 않은 코드

class Hello extends React.Component { 
	render(){
    	return React.createElement('div', null, `Hello ${this.props.thWhat}`);
    }

}

ReactDOM.render(
	React.createElement(Hello, { toWhat: 'World'}, null),
    document.getElementById('root')
);

이 결과로,

const element = {
	type: 'h1',
    props: {
    	className: 'greeting',
        children: 'Hello, world!'
    }
}

JS객체가 나오게 된다, React는 이 객체를 읽어 DOM을 만드는데 사용하고 항상 최신 상태를 유지한다.

React에서 이 객체를 element 객체라고 부른다.

createElement의 파라미터로는

1.type 유형 (div, span html태그나 react components)
2.props (일단 속성들이 들어간다고 기억 해두자)
3.children (현재 element가 포함하고 있는 자식 element)

React에서 JSX가 필수는 아니지만 JSX를 사용하면 생산성과 가독성이 올라가니 사용 권장.

JSX의 장점

1. 간결한 코드
2. 가독성 증가
3. injection Attacks 방어 (입력창에 소스코드를 입력해 공격하는 방법)

JSX의 사용법

모든 JS문법 지원, html과 섞어서 사용, JS코드를 중간에 사용하고 싶다면 중괄호 이용 { }

const greet = <h1> hello, {name} </h1>;

const element = (
	<h1>
    	Hello, {formatUser(user)} // JS 함수 호출 가능.
    </h1>
);

그렇다면 태그의 속성에는 값을 어떻게 넣을까?

// 큰따옴표 사이에 문자열을 넣거나 
const element = <div tabIndex="0"></div>;

// 중괄호 사이에 JS코드
const element = <img src={user.photoUrl}></img>;

children을 정의하는 방법

const element = (
	<div>
    	<h1> 그냥 이렇게 하면 된다고 한다/ </h1>
        <h1> 직관적이다. </h1>
    </div>
);

JSX 사용 해보기.

패키지 내의 src안에 디렉토리를 만든다.

chapter_03이라는 디렉토리를 만들고, 그 안에 Book.jsx를 생성 한다.

// Book.jsx

import React from "react";

function Book(props) {
    return (
        <div>
            <h1>{`이 책의 이름은 ${props.name}입니다.` }</h1>
            <h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`} </h2>
        </div>
    )
}

export default Book;

이제 Book.jsx를 사용할 상위 컴포넌트 Library.jsx를 생성 한다.

Library.jsx

import React from "react";
import Book from "./Book";

function Library(props){
    return (
        <div>
            <Book name="처음 만난 파이썬" numOfPage={300}/>
            <Book name="처음 만난 AWS" numOfPage={400}></Book>
            <Book name="처음 만난 리액트" numOfPage={500}></Book>
        </div>

    );

}

export default Library;

그 후 index.js를 수정 해준다.

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import Library from './chapter_03/Library';
// export해준 Library import

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Library/>
  </React.StrictMode>,
  document.getElementById('root')
);

이제 다시 npm start를 해보자.

우리가 작성한 내용대로 component가 렌더링 되어 있다.