[Chapter 03] JSX 소개

---

1️⃣ JSX란?

• 자바스크립트 문법을 확장시킨 것
  • ex. const element=<h1>Hello, world!</h1>;
    • HTML의 h1코드와 자바스크립트 대입 연산자가 결합되어있음

---

2️⃣ JSX의 역할

• JSX는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거침
  • JSX로 코드를 작성해도 최종적으로 자바스크립트 코드가 나오게 됨
  • JSX 코드를 자바스크립트 코드로 변환하는 역할을 하는게 리액트의 createElement()
• JSX가 js로 변환되기 위해선 createElement가 필요함
• 순수하게 js만 사용했을때 jsx를 사용한 부분을 React.createElement로 대체해서 사용해야함
• JSX 문법을 사용하면 리액트에서는 내부적으로 createElement라는 함수를 사용하게 변환됨

---

3️⃣ JSX의 장점

💚 코드 간결성

JSX 사용함

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

• HTML의 <div> 태그를 사용해, name이라는 변수가 들어간 인사말을 표현함

JSX 사용 안함

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

• 리액트의 createElement() 함수를 사용함

💚 가독성 향상

• JSX 를 사용한 코드가 훨씬 더 의미가 빠르게 와닿음
  • 유지 보수 관점에서도 굉장히 중요한 부분임
    • 코드상에 존재하는 버그 또한 쉽게 발견할 수 있음

💚 보안성 향상

Injection Attack

• 입력창에 문자나 숫자 같은 일반적인 값이 아닌 소스코드를 입력하여 해당 코드가 실행되도록 만드는 해킹 방법
  • ex. 아이디를 입력하는 입력창에 JS 코드를 넣었을 때, 그 코드가 그대로 실행되어버림

JSX

• ReactDOM은 렌더링 전 임베딩된 값을 모두 문자열로 변환함
• 따라서 명시적으로 선언되지 않은 값은 괄호 사이에 들어갈 수 없음
• cross-site-scripting attacks을 방어할 수 있음

---

4️⃣ JSX의 사용법

• JSX는 JS 문법을 확장시킨 것이기 때문에, 모든 JS 문법을 지원함
• 추가로 XML과 HTML을 섞어서 사용하면 됨

const name='소플';
const element = <h1>안녕, {name} </h1>;

function formatName(user){
    return user.firstName+' '+user.lastName;
}

const user={
    firstName: 'Nellie',
    lastName: 'Kim'
};

const element2= (
    <h1>
        Hello, {formatName(user)}
    </h1>
)

ReactDOM.render{
    element,
    document.getElementById('root')
}

• XML, HTML 코드를 사용하다가 JS 코드를 사용하고 싶으면 괄호로 묶어주면 됨
• HTML 코드 사이에 괄호를 사용해서 볕수가 아닌 formatName() 이라는 자바스크립트 함수를 호출함
• JSX에서 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다!

---

5️⃣JSX 코드 작성해보기

import React from "react";

export default function Book(props) {
  // Library 에서 넘어온 name과 numOfPage의 값이 props에 담겨서 옴
  console.log(props);
  return (
    <div>
      <h1>{`이 책의 이름은 ${props.name}입니다.`}</h1>
      <h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
    </div>
  );
}

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

export default function Library() {
  return (
    <div>
      {/* Book 컴포넌트한테 name과 numOfPage의 값을 각각 넘김 */}
      <Book name="처음 만난 파이썬" numOfPage={300} />
      <Book name="처음 만난 AWS" numOfPage={400} />
      <Book name="처음 만난 리액트" numOfPage={500} />
    </div>
  );
}

• Library 에서 Book 컴포넌트에게 name과 numOfPage을 넘긴다
• 그 넘긴 값을 Book의 props에 담아서 사용한다
• Book의 props를 콘솔로 찍어보면 다음과 같은 객체들을 얻을 수 있음
  

  

---

💻 Reference

소플의 처음 만난 리액트 - 예스24

💻 GIT

GitHub - nanna29/Soaple-First-Meet-React: 소플의 처음 만난 리액트 책을 보고 실습한 코드를 남기는 레포