JSX 표현식 (Expression)

[주인장]

1. 표현식 (Expression‎)

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

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

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

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

// 함수 정의
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'));

2. JSX 내부의 조건문
- JSX 안에서는 일반적인 JavaScript의 if, switch 문을 직접 사용할 수 없습니다. 대신에 JSX 내에서는 JavaScript 표현식을 사용하여 조건부 렌더링을 처리합니다. 주로 조건부 연산자(삼항 연산자)나 논리 연산자를 활용하여 조건부 렌더링을 구현합니다.
조건에 따라서 출력 또는 미출력 해야할 엘리먼트를 처리하기 위해 사용합니다.

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

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

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

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

2. AND 논리 연산자&&

const hasPermission = ?;

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

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

3. OR 논리 연산자 ||

const isGuest = true;

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

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

3. 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>
);

- 위의 코드에서 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>
));

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