[React] JSX

parkheeddong·2023년 5월 3일

목록 보기

2/13

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

JSX란?!

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

Javascript Syntax Extension의 약자로, JavaScript를 확장한 문법이다.

Javascript + HTML의 형태이다.
JSX는 React “엘리먼트(element)” 를 생성한다.
babel 이 JSX 를 JavaScript 로 변환을 해준다.

📌 Javascript가 아닌 JSX를 사용하는 이유?

JSX를 사용하지 않고 Javascript로만 작성할 수도 있다. 다만, element를 만들 때에 React.createElement을 반복적으로 사용해야 한다.
React.createElement ( type, [props], ...children] )
type 즉 element 유형 (span, div 등), props, 그리고 children(element가 포함한 자식 element)을 파라미터로 넘겨주어야 한다.

// JavaScript
function getJSTitle() {
  return React.createElement("h1", "WHY JSX");
}

그러나 JSX를 사용하면 더 편리하다! JSX는 내부적으로 HTML코드를 자바스크립트 코드로 변환해준다. 즉, 다음과 같이 JSX로 작성한 코드는 자바스크립트 코드로 변환된다.

// JSX
function getJSXTitle() {
  return (
    <h1> WHY JSX </h1>
  );

JSX는 HTML코드 사이에 자바스크립트 코드를 작성하고 싶으면 중괄호를 사용하면 된다.

1. JSX에 표현식 포함하기

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

2. JSX는 객체를 표현한다.

JSX를 React.createElement() 호출로 컴파일할 수 있다.

다음 두 예시는 동일하다.
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성한다.
// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};
이러한 객체를 “React 엘리먼트”라고 한다.

React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지하는 데 사용한다.

3. 두가지 이상의 태그는 무조건 하나의 태그로 감싸져있어야 한다.

❌ Wrong

import React from 'react';
import Hello from './Hello';

function App() {
  return (			
    <Hello />
    <div>안녕히계세요.</div>
  );
}

export default App;

이런 코드는 오류가 발생시킨다.

⭕ Correct

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <div>안녕히계세요</div>
    </div>
  );
}

export default App;

✅ 리액트의 Fragment

태그를 작성 할 때 이름 없이 작성을 하게 되면 Fragment 가 만들어지는데, Fragment 는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}
export default App;

4. 태그에 style 과 CSS class 를 설정하는 방법

🔔 인라인 스타일은 객체 형태로 작성

background-color 처럼 - 로 구분되어 있는 이름들은 backgroundColor 처럼 camelCase 형태로 네이밍

import React from 'react';
import Hello from './Hello';

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

export default App;

🔔 CSS class 를 설정 할 때에는 class= 가 아닌 className= 으로 설정

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;