JSX

JavaScript + (XML/HTML)

React에서 사용되는 자바스크립트의 확장 문법으로, XML 또는 HTML과 유사한 구조를 가지고 있습니다. JSX를 사용하면 React 요소를 좀 더 간편하게 작성할 수 있습니다. 이는 React에서 UI를 표현하는 데에 주로 사용되며, 자바스크립트 코드 내에 마크업을 작성할 수 있게 해줍니다.

동작

JSX 문법으로 작성하는 코드는 React 의 createElement 함수를 사용하는 JavaScript 코드로 변환됩니다.

JSX JavaScript 로 변환 React 엘리먼트를 생성 가상 DOM 실제 DOM

문법사항

하나의 루트 엘리먼트

요소 (Element)

표현식 (Expression)

속성 사용

JSX 내부의 조건문

JSX 내부의 반복문

스타일 적용

인라인 스타일 방식

클래스 지정 방식

주석

하나의 루트 엘리먼트

최상위(루트) 엘리먼트는 하나로, 자식 엘리먼트를 감싸야한다.

작성된 코드가 가상 DOM 으로 생성되어야하는데, 가상 DOM 은 트리구조이다. 트리구조는 최상위 노드인 루트가 1개로 이루어져 있다. 따라서, 가상 DOM 트리구조에 맞게 최상위 엘리먼트가 1개로 제공되어야한다.

JSX 로 엘리먼트를 작성한 코드는 React 가 엘리먼트를 생성하는 코드(React.createElement)로 변환합니다. 그 후 렌더링 함수를 호출하면, 컴포넌트를 기본 구조로 렌더링 합니다. 이때 React 는 컴포넌트를 기본 구조로 Virtual DOM 을 생성합니다.

React 의 Virtual DOM 은 각 컴포넌트 하나를 하나의 노드로 하여 트리 구조로 관리합니다. 이 때문에, 가상 DOM 에 생성하기 위해서 트리 구조 형태로 최상위의 하나의 노드를 가진 형태로 제공되어야하기 때문에 엘리먼트 들을 하나의 루트 엘리먼트로 감싸서 작성해야합니다.

트리 구조에서 루트는 트리의 시작 지점이며, 각 노드는 하위 노드를 가질 수 있습니다. React가 컴포넌트 트리를 효과적으로 관리하고 업데이트하기 위해서는 트리의 시작점이 되는 루트 엘리먼트가 필요합니다.

React에서는 컴포넌트의 반환값으로 여러 개의 루트 엘리먼트를 직접 반환하는 것이 허용되지 않습니다. 반환되는 JSX는 하나의 루트 엘리먼트로 감싸져 있어야 합니다.

위의 잘못된 예시에서처럼 여러 루트 엘리먼트를 직접 반환하면 React가 컴포넌트 트리를 올바르게 처리할 수 없어 오류가 발생합니다. 이를 해결하기 위해서는 하나의 부모 엘리먼트로 감싸야 합니다.

프래그먼트 (Fragment)

여러 요소를 그룹화하는 데 사용되는 특수한 형태의 컴포넌트

React 16.2.0 버전부터 도입

문법

JavaScript
복사

<React.Fragment></React.Fragment>
JavaScript
복사

function MyComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Paragraph content</p>
    </>
  );
}
JavaScript
복사

function MyComponent() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Paragraph content</p>
    </React.Fragment>
  );
}
JavaScript
복사

Fragment를 사용하면 부모 엘리먼트를 추가로 생성하지 않고도 여러 개의 자식 엘리먼트를 그룹화할 수 있습니다. 이는 특히 불필요한 DOM 요소를 생성하지 않고 가독성을 높이고자 할 때 유용합니다.

명시적으로 React.Fragment를 사용하여 표현할 수도 있습니다

<></> vs <div></div>

: 프래그먼트(Fragment) 로 묶은 경우는 실제로 부모 엘리먼트를 생성하지 않습니다.

•

<></> 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fragment</title>
</head>
<body>
    <h1>Title</h1>
    <p>Paragraph content</p>
</body>
</html>
JavaScript
복사

•

<div></div> 사용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div</title>
</head>
<body>
    <div>
        <h1>Title</h1>
        <p>Paragraph content</p>
    </div>
</body>
</html>
JavaScript
복사

엘리먼트 (Element)

브라우저에 컨텐츠를 표현하는 하나의 단위

엘리먼트는 React에서 컴포넌트가 실제로 브라우저에 나타내는 내용을 표현하는 단위입니다. React에서 엘리먼트는 사용자 인터페이스를 나타내기 위해 사용되며, 각 엘리먼트는 가상 DOM (Virtual DOM)에서 컴포넌트의 인스턴스에 대응합니다.

JSX에서는 모든 엘리먼트에 대해 종료 태그를 명시적으로 작성해야 합니다.

(HTML에서는 몇몇 태그에서 닫는 태그가 생략되어도 유효합니다.)

HTML 인 경우 OK

<input type="text" name="test">
HTML
복사

React 인 경우 ERROR

<input type="text" name="test">
HTML
복사

React 인 경우

<input type="text" name="test" />
HTML
복사

종료 의미를 가지는 / 를 받드시 명시해야한다.

엘리먼트의 생성

React 엘리먼트는 JavaScript 표현식을 사용하여 생성됩니다. JSX 문법을 사용하면 HTML과 유사한 문법으로 React 엘리먼트를 작성할 수 있습니다.

const element = <h1>Hello, World!</h1>;
JavaScript
복사

엘리먼트의 특징

React 엘리먼트는 가상 DOM에서 컴포넌트의 상태 변화에 따라 업데이트되고, React가 이를 효율적으로 처리하여 실제 DOM에 변경 사항을 최소화합니다.

const element = <p>{new Date().toLocaleTimeString()}</p>;
JavaScript
복사

엘리먼트의 렌더링

React 엘리먼트는 ReactDOM.render()나 컴포넌트의 렌더 메소드 등을 통해 실제 DOM에 렌더링됩니다.

ReactDOM.render(element, document.getElementById('root'));
JavaScript
복사

엘리먼트의 구성요소

•

컨텐츠

◦

텍스트

◦

자식 엘리먼트

•

속성

엘리먼트에 텍스트 컨텐츠만 구성

const element = <h1>Hello, World!</h1>;
JavaScript
복사

엘리먼트에 자식 엘리먼트 구성

const element = (
  <div>
    <h1>Title</h1>
    <p>Paragraph content</p>
  </div>
);
JavaScript
복사

엘리먼트 속성

JSX에서는 HTML과 유사한 속성을 사용할 수 있지만 몇 가지 차이가 있습니다.

html 과 차이가 있는 React 엘리먼트 속성

class 속성

style 속성

class 속성

JSX에서는 HTML의 class 속성을 className으로 사용합니다. 이는 JavaScript에서 class는 예약어이기 때문입니다.

// HTML
<div class="my-class">Hello</div>

// JSX
<div className="my-class">Hello</div>
HTML
복사

style 속성

HTML에서는 style 속성에 문자열로 CSS를 지정했지만, JSX에서는 객체 형태로 스타일을 지정합니다.

// HTML
<div style="color: red; font-size: 16px;">Hello</div>

// JSX
<div style={{ color: 'red', fontSize: '16px' }}>Hello</div>
HTML
복사

표현식 (Expression)

{ } 기호를 사용해서, JavaScript 의 수식, 변수, 함수 등을 사용할 수 있는 문법

.JSX 내에서 중괄호 {}를 사용하여 JavaScript 표현식을 삽입할 수 있습니다. 이러한 표현식은 동적으로 값을 생성하거나 변수, 함수 등을 사용할 때 유용합니다.

import React from 'react';
import ReactDOM from 'react-dom';

// 변수 선언
const name = 'aloha';

// 함수 정의
const formatName = (name) => {
  return name.toUpperCase();
};

// JSX를 직접 렌더링
const element = (
  <div>
    {/* 변수 사용 */}
    <p>Hello, {name}!</p>

    {/* 함수 호출 */}
    <p>Formatted Name: {formatName(name)}</p>

    {/* 산술 연산 */}
    <p>2 + 2 = {2 + 2}</p>
  </div>
);

// JSX 렌더링
ReactDOM.render(element, document.getElementById('root'));
JavaScript
복사

JSX 내부의 조건문

JSX 안에서는 일반적인 JavaScript의 if, switch 문을 직접 사용할 수 없습니다. 대신에 JSX 내에서는 JavaScript 표현식을 사용하여 조건부 렌더링을 처리합니다. 주로 조건부 연산자(삼항 연산자)나 논리 연산자를 활용하여 조건부 렌더링을 구현합니다.

조건에 따라서 출력 또는 미출력 해야할 엘리먼트를 처리하기 위해 사용합니다.

조건부 연산자(삼항 연산자)

AND 논리 연산자&&

OR 논리 연산자 ||

조건부 연산자(삼항 연산자)

const X = ❓;

const element = (
  <div>
    { X ? <p>A</p> : <p>B</p>}
  </div>
);
JavaScript
복사

•

X 가 true 일 때
 <p>A</p> 반환

•

X 가  false, null, undefined, 0, NaN , ‘’ 일 때
 <p>B</p> 반환

AND 논리 연산자&&

const hasPermission = ❓;

const element = (
  <div>
    {hasPermission && <p>Permission granted!</p>}
  </div>
);
JavaScript
복사

•

왼쪽 피연산자가 true 일 때,
 오른쪽 피연산자 반환

•

왼쪽 피연산자가 false, null, undefined, 0, NaN , ‘’ 일 때
 출력 

OR 논리 연산자 ||

const isGuest = true;

const element = (
  <div>
    {isGuest || <p>Welcome, Guest!</p>}
  </div>
);
JavaScript
복사

•

왼쪽 피연산자가 false, null, undefined, 0, NaN , ‘’ 아닐 때
 왼쪽 피연산자 반환

•

왼쪽 피연산자가 false, null, undefined, 0, NaN , ‘’ 일 때
 오른쪽 피연산자 반환

JSX 내부의 반복문

JSX 내부에서 반복문을 사용할 때는, 주로 배열을 map() 함수로 반복하여 구현하고 결과를 표현식 { } 작성한다.

JSX 내부에서는 for 문을 사용할 수 없다.

for 문을 꼭 사용 해야 한다면, 함수를 정의해서 결과를 반환받고 표현식으로 XML/HTML 을 출력해주면 된다.

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) => (
  <li key={number.toString()}>{number}</li>
));

const element = (
  <div>
    <h2>Number List</h2>
    <ul>{listItems}</ul>
  </div>
);
JavaScript
복사

위의 코드에서 map() 함수는 numbers 배열의 각 요소에 대해 새로운 <li> 요소를 생성하고, 이를 listItems 배열에 저장합니다. 그리고 이 listItems 배열을 JSX 내에서 {} 중괄호로 감싸서 렌더링합니다.

반복되는 요소들에는 고유한 key 속성을 제공하는 것이 중요합니다. 이것은 React가 각 요소를 식별하고 관리할 수 있게 도와주는데, 보통 각 항목의 고유한 식별자를 사용합니다.

위의 코드에서는 key={number.toString()}를 사용하여 각 숫자를 문자열로 변환하여 고유한 키를 생성하고 있습니다.

이와 같은 방식으로 배열을 순회하면서 JSX 요소를 생성할 수 있습니다.

key 속성

: JSX 안에서 반복문을 사용하여 엘리먼트를 구성하는 경우, 각 엘리먼트에 key 속성을 지정하는 것이 좋습니다.

일반적으로 key 속성에 배열의 각 항목을 식별하는 고유한 값을 사용하는 것이 좋습니다.

각 엘리먼트를 고유하게 식별할 수 있는 key 가 있어야, 엘리먼트 간에 변화를 감지하고 효율적으로 업데이트할 수 있습니다.

배열의 index 를 key 속성의 값으로 사용하는 것은 권장하지 않습니다.

인덱스는 배열 내에서의 위치를 나타내는 값으로, 항목이 추가되거나 삭제될 때 변경될 수 있습니다. 따라서 인덱스를 key로 사용하면 고유성이 보장되지 않을 수 있습니다.

const data = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
];

const listItems = data.map(item => (
  <li key={item.id}>{item.name}</li>
));
JavaScript
복사

이렇게 하면 각 항목은 고유한 id를 가지고 있기 때문에 React가 엘리먼트 간에 변화를 효율적으로 감지할 수 있습니다.

스타일 적용

인라인 스타일 방식

클래스 지정 방식

인라인 스타일 방식

인라인 스타일은 HTML 엘리먼트의 style 속성을 사용하여 스타일을 직접 정의하는 방식입니다. 이 방식은 해당 엘리먼트에만 적용되는 스타일을 정의할 수 있어 유연하게 사용할 수 있습니다. 스타일은 JavaScript 객체의 형태로 작성되며, 객체의 속성으로 스타일 속성을 지정합니다.

•

문법

style={  { 스타일속성1 : '값', 스타일속성2 : '값'  }  }
JavaScript
복사

•

style 속성 내에 중괄호 { }  를 사용하여 JavaScript 객체를 생성하고, 객체의 속성으로 스타일을 지정합니다.

•

객체  { } 로 지정한 스타일을 표현식으로 { } 출력합니다.

•

CSS 에서는 스타일 속성명을 ‘-’ 케밥 케이스(kebab-case)작성하지만, 
JSX 에서는 스타일 속성명을 카멜 케이스(CamelCase)로 작성해야 합니다.

const element = (
  <div style={{ color: 'blue', fontSize: '16px', backgroundColor: 'lightgray' }}>
    This is a text with inline styles.
  </div>
);
JavaScript
복사

클래스 지정 방식

클래스 지정 방식은 CSS 클래스를 미리 정의하고, 해당 클래스를 HTML 엘리먼트에 적용하는 방식입니다. 이 방식은 여러 엘리먼트에 동일한 스타일을 적용하거나, 전역 스타일 시트를 활용할 때 효과적입니다.

•

styles.css

.customClass {
  color: red;
  font-size: 18px;
  background-color: lightyellow;
}
CSS
복사

스타일 시트 파일의 이름에 대한 관습은 주관적이며, 프로젝트나 팀의 규칙에 따라 다를 수 있습니다. 그러나 일반적으로 React 프로젝트에서는 styles.css와 같이 복수형으로 명명하는 것이 일반적입니다.

•

Test.jsx

// React 컴포넌트에서 클래스 적용
import React from 'react';
import './styles.css';

const element = (
  <div className="customClass">
    This is a text with styles applied using a CSS class.
  </div>
);
JavaScript
복사

JSX에서는 HTML의 class 속성을 className으로 사용합니다. 이는 JavaScript에서 class는 예약어이기 때문입니다.

주석

JSX 주석은 JavaScript XML (JSX) 코드 내에서 주석을 추가하는 방법을 제공합니다. JSX 주석은 브라우저에 렌더링되지 않고, 소스 코드의 가독성을 향상시키고 코드에 설명을 추가하는 데 사용됩니다.

한 줄 주석

여러 줄 주석

한 줄 주석

const element = (
  <div>
    {/* 이 부분은 화면에 나타나지 않는 한 줄 주석입니다. */}
    <p>Hello, World!</p>
  </div>
);
JavaScript
복사

위의 예제에서 {/* ... */}는 한 줄 주석을 나타내며, 이 부분은 화면에 나타나지 않습니다.

여러 줄 주석

const element = (
  <div>
    {/* 
      여러 줄 주석의 예시입니다.
      여러 줄로 주석을 작성할 수 있습니다.
    */}
    <p>Hello, World!</p>
  </div>
);
JavaScript
복사

여러 줄 주석은 {/* ... */} 안에 여러 줄의 주석을 작성할 수 있습니다.

JSX 주석은 React 엘리먼트 내부에서 사용되며, 컴파일되면 브라우저에는 포함되지 않습니다. 주석은 주로 코드의 특정 부분에 대한 설명이나, 임시적인 코드 비활성화 등의 용도로 사용됩니다.