React : map

React에서 map은 배열의 각 요소를 순회하며 새로운 JSX 요소를 생성하는 데 사용되는 필수적인 메서드입니다. 이를 통해 반복적인 UI 요소를 효율적으로 렌더링할 수 있습니다.

기본적인 map 사용법

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

function NumberList() {
    return (
        <ul>
            {numbers.map(number => (
                <li key={number}>{number}</li>
            ))}
        </ul>
    );
}

객체 배열 다루기

const users = [
    { id: 1, name: 'John', email: 'john@example.com' },
    { id: 2, name: 'Jane', email: 'jane@example.com' },
    { id: 3, name: 'Bob', email: 'bob@example.com' }
];

function UserList() {
    return (
        <div>
            {users.map(user => (
                <div key={user.id} className="user-card">
                    <h3>{user.name}</h3>
                    <p>{user.email}</p>
                </div>
            ))}
        </div>
    );
}

인덱스와 함께 사용하기

const fruits = ['Apple', 'Banana', 'Orange'];

function FruitList() {
    return (
        <ul>
            {fruits.map((fruit, index) => (
                <li key={index}>
                    {index + 1}. {fruit}
                </li>
            ))}
        </ul>
    );
}

조건부 렌더링과 함께 사용

const tasks = [
    { id: 1, text: '운동하기', completed: true },
    { id: 2, text: '공부하기', completed: false },
    { id: 3, text: '장보기', completed: true }
];

function TaskList() {
    return (
        <ul>
            {tasks.map(task => (
                <li 
                    key={task.id}
                    style={{ 
                        textDecoration: task.completed 
                            ? 'line-through' 
                            : 'none' 
                    }}
                >
                    {task.text}
                </li>
            ))}
        </ul>
    );
}

이벤트 핸들러와 함께 사용

function InteractiveList() {
    const [items, setItems] = useState([
        { id: 1, text: '항목 1' },
        { id: 2, text: '항목 2' },
        { id: 3, text: '항목 3' }
    ]);

    const handleClick = (id) => {
        setItems(items.filter(item => item.id !== id));
    };

    return (
        <ul>
            {items.map(item => (
                <li key={item.id}>
                    {item.text}
                    <button onClick={() => handleClick(item.id)}>
                        삭제
                    </button>
                </li>
            ))}
        </ul>
    );
}

중첩된 map 사용

const data = [
    {
        category: '과일',
        items: ['사과', '바나나', '오렌지']
    },
    {
        category: '채소',
        items: ['당근', '브로콜리', '시금치']
    }
];

function NestedList() {
    return (
        <div>
            {data.map(group => (
                <div key={group.category}>
                    <h2>{group.category}</h2>
                    <ul>
                        {group.items.map(item => (
                            <li key={item}>{item}</li>
                        ))}
                    </ul>
                </div>
            ))}
        </div>
    );
}

컴포넌트로 분리하기

function ListItem({ item }) {
    return (
        <li className="list-item">
            <span>{item.text}</span>
        </li>
    );
}

function List({ items }) {
    return (
        <ul>
            {items.map(item => (
                <ListItem key={item.id} item={item} />
            ))}
        </ul>
    );
}

주의사항과 Best Practices

key 속성의 중요성

// 잘못된 예시
{items.map((item, index) => (
    <div key={index}>{item.text}</div>
))}

// 올바른 예시
{items.map(item => (
    <div key={item.id}>{item.text}</div>
))}

 

빈 배열 처리

function SafeList({ items }) {
    if (!items || items.length === 0) {
        return <p>데이터가 없습니다.</p>;
    }

    return (
        <ul>
            {items.map(item => (
                <li key={item.id}>{item.text}</li>
            ))}
        </ul>
    );
}

 

주의사항

1. 고유한 key 값 사용
2. 적절한 에러 처리
3. 성능 최적화를 위한 컴포넌트 분리
4. 불필요한 중첩 피하기

이러한 원칙들을 지키면서 map을 사용하면 효율적이고 유지보수하기 쉬운 React 컴포넌트를 만들 수 있습니다.