인프런 리액트 JSX

신수민·2024년 9월 11일

Recat

목록 보기

4/9

*element라는 변수에 오른쪽 저장
JSX: 자바스크립트 + html

필수는 아님 create element를 사용하면 되기 때문
=> 그렇지만 jsx: 가독성 좋고 편리함

createElement: type, [props], [...children] 사용

Injection Attacks 방어: 보안성올라감
: 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스코드를 입력하여 해당 코드가 실행되도록 함
-> react Dom : 임베딩 전 모두 문자열로 변환: 방어

JSX 사용법 (XML+HTML)

XML, html 사용하다가 jacascript 사용하고 싶으면 중괄호 써서 묶어주면 됨

-> name: JS의 변수를 참조하기 위함

태그의 속성에 값을 넣는 법

children을 정의하는 방법

-> 상위 태그가 하위 태그를 둘러싸도록하면 됨

실습

book component

import React from "react";

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

export default Book;