섹션 3. JSX

JSX란 무엇인가?

A syntax extension to JavaScript / 자바스크립트의 확장 문법이라고 생각하면 된다.

JavaScript + XML/HTML

  

JSX의 역할

JSX문법을 사용하면 리액트에서는 create element 함수를 사용하게 된다.

*리액트에서 JSX를 쓰는 것이 필수는 아니다.

  
 

JSX의 장점

<div> Hello, {name}</div>

  

JSX 사용한 경우

React.createElement('div', null, Hello, ${name}');

  

JSX를 사용하지 않은 경우

1. 코드가 간결해진다.
2. 가독성이 향상된다.
3. 버그를 발견하기 쉽다.
4. injection Attacks를 방어할 수 있다.

  

JSX 사용법

“JavaScript 문법 + XML/HTML”

…XML/HTML

{JavaSript코드} → 이런식으로 코드 중간에 중괄호를 입력해서 JavaScript코드를 입력하면 된다.

…XML/HTML

  

JSX 코드 작성해보기

import React from "react";

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

    export default Book;

Book의 상위 폴더인 Library 폴더를 만든 상태이다.
 

Element란?

Elements are the smallest building blocks od React apps.

리액트 앱을 구성하는 가장 작은 블록들이다.

React elements는 화면에서 보이는 것들을 기술한다.

  

Elements 의 생김새.

리액트 Elements는 자바스크립트 객체 형태로 존재.

• Element 타입에 HTML 태그이름이 문자열로 들어간 경우 그것 자체로 하나의 돔이 된다. 그러나… 문자열이 아닌 경우에는??? 문자열이 아닌, 리액트 컴포넌트의 이름이 들어간 경우 create elements.

  

Elements의 특징 및 렌더링하기.

React elements are immutable : 불변성

Elements 생성후에는 children이나 attributes를 바꿀 수 없다.

어라? elements 는 눈에 보이는건데,, 그럼 시각적 효과를 못바꾼다는 건가?

elements는 하나의 작은 범주이고, Component가 큰 범주이다.

완성된 붕어빵 = Component / 붕어빵의 속 재료 = Element

실제로 화면에 보여주기 위해서는 Rendering를 해야한다.