JSX와 React 요소, 리스트와 키를 사용한 반복 렌더링

React는 현대 웹 개발에서 매우 인기 있는 라이브러리 중 하나입니다. 다양한 UI 컴포넌트를 만들고 관리할 수 있는 힘을 제공하고, 그 중에서도 JSX는 핵심적인 역할을 합니다. 이 글에서는 JSX의 정의와 특징, React 요소, 그리고 리스트와 키를 사용한 반복 렌더링에 대해 자세히 살펴보겠습니다.

JSX란?

JSX는 JavaScript XML의 약자로, React에서 사용되는 문법입니다. JSX는 JavaScript 코드와 HTML을 혼합하여 사용할 수 있게 해주며, 이를 통해 직관적이고 가독성이 높은 UI를 작성할 수 있습니다. JSX를 사용하면, 복잡한 구조의 UI 컴포넌트를 만들 때 더 간결하고 이해하기 쉽게 코드를 작성할 수 있습니다.

JSX의 주요 특징

HTML과 유사한 문법: JSX는 HTML처럼 생겼지만, 실제로는 JavaScript 객체로 변환됩니다.
표현력: JSX에서는 JavaScript 표현식을 중괄호 {} 안에 써서 변수나 함수의 값을 사용할 수 있습니다.
자동으로 자식 요소 맵핑: JSX에서는 컴포넌트를 호출할 때 태그 이름으로 자식 요소를 자동으로 맵핑하는 기능이 있습니다.

JSX 코드 예제

            
{`const element = Hello, world!;`}

위의 코드에서, element는 JSX로 작성된 React 엘리먼트를 나타냅니다. JSX는 컴포넌트를 정의하는 데 사용됩니다.

React 요소

React 요소는 React의 기본 빌딩 블록입니다. React 요소는 컴포넌트와 유사하지만, React 컴포넌트를 인스턴스화하는 것이 아닙니다. 요소는 React의 가상 DOM을 업데이트하는데 중요한 역할을 하며, 이러한 요소는 불변성이 특징입니다. 즉, 요소 자체는 생성된 후 절대 변경되지 않습니다.

React 요소 생성하기

            
{`const element = React.createElement('h1', null, 'Hello, world!');`}

위의 코드에서, React.createElement 메소드를 사용하여 React 요소를 생성했습니다. 이 방법은 JSX가 내부적으로 사용하는 방법입니다. JSX를 사용하면 더 간결하게 작성할 수 있습니다.

리스트와 키를 사용하는 반복 렌더링

React에서는 리스트를 쉽게 렌더링할 수 있습니다. 이를 통해 유동적인 데이터 표현이 가능합니다. 리스트를 렌더링할 때는 각 요소에 고유한 키를 부여해야 합니다. 이 키는 React가 어떤 항목이 변경, 추가 또는 삭제되었는지를 식별하는 데 도움을 줍니다.

리스트 렌더링 예제

다음은 간단한 리스트를 렌더링하는 예시입니다. 이 예제에서는 동적 데이터로 쉽게 변경할 수 있는 유용한 방법을 보여줍니다.

            
{`const fruits = ['사과', '바나나', '체리'];

function FruitList() {
    return (
        
            {fruits.map((fruit, index) => (
                {fruit}
            ))}
        
    );
}`}

위의 FruitList 컴포넌트는 fruits 배열을 맵핑하여 각 과일을 리스트 항목으로 표시합니다. 여기서 각 li 태그에는 고유한 key 속성을 부여해야 합니다. 이 예제에서는 인덱스를 키로 사용했지만, 실무에서는 더 고유한 키를 사용하는 것이 좋습니다.

키의 중요성

키는 리스트의 각 요소가 고유함을 보장하여 렌더링 성능을 최적화합니다. React는 키를 기반으로 요소가 변경되었는지를 판단하므로, 리스트의 순서가 바뀌거나 항목이 추가되고 삭제되는 경우에 중요한 역할을 합니다.

            
{`const colors = ['빨간색', '파란색', '초록색'];

function ColorList() {
    return (
        
            {colors.map(color => (
                {color}
            ))}
        
    );
}`}

위의 예제에서 각 색상 이름을 키로 사용했습니다. 이는 리스트의 항목이 고유하다는 것을 보장합니다.

동적 리스트 업데이트

React에서는 상태(state)를 이용하여 리스트를 동적으로 업데이트할 수 있습니다. 예를 들어, 사용자가 리스트에 새 항목을 추가하는 기능을 만들어볼 수 있습니다.

            
{`import React, { useState } from 'react';

function ItemList() {
    const [items, setItems] = useState(['item 1', 'item 2']);
    const [inputValue, setInputValue] = useState('');

    const addItem = () => {
        setItems([...items, inputValue]);
        setInputValue('');
    };

    return (
        
             setInputValue(e.target.value)} 
                placeholder="새 항목 입력" 
            />
            
            
                {items.map((item, index) => (
                    {item}
                ))}
            
        
    );
}`}

위의 예제는 사용자가 입력한 새로운 항목을 리스트에 추가하는 방법을 보여줍니다. useState 훅을 사용해 상태를 관리하며, 입력창과 버튼을 통해 동적인 업데이트를 구현했습니다.