[React] JSX

JSX

• React를 사용할 때 필수적으로 사용해야 한다.
• A syntax extension to JavaScript ✅ 자바스크립트의 확장 문법
• JavaScript + XML / HTML

const element = <h1>Hello, world!</h1>

---

1. JSX의 장점

1. 간결한 코드
2. 가독성 향상
   • 의미가 직관적으로 와닿음
   • 버그를 발견하기 쉬움
3. Injection Attacks 방어
   • Injection Attacks : 클라이언트의 입력값을 조작하여 서버의 데이터베이스를 공격

 

2. JSX 사용법

Javascript + XML / HTML

...XML / HTML
{ JavaScript Code }
...XML / HTML

• 중간에 JavaScript 코드를 사용하고 싶으면 {} 이용
• 변수, 함수 어떤 형태이든 가능

 

태그의 속성에 값을 넣는 방법

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

// 중괄호 사이에 자바스크립트 코드를 넣으면 됨!
const element = <img src={user.avatarUrl}></img>

 

✅ JSX에서는 중괄호 사용하면 무조건 자바스크립트 코드가 들어간다.

 

자식(children)을 정의하는 방법

const element = (
    <div>
        <h1>안녕하세요</h1>
        <h2>열심히 공부해봅시다!</h2>
    </div>
)

• HTML 작성하듯이, 상위 태그가 하위 태그를 둘러싸도록 작성해준다.

---

3.  (실습) JSX 코드 작성하기

import React from "react";

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

export default Book;

 

// Book 컴포넌트를 사용하는 상위 컴포넌트 생성

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

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

export default Library;

---

 

🚀 참고

• 처음 만난 리액트(React) , 소플 - 섹션3. JSX