React : map

2025. 2. 16. 11:34·TypeScript
반응형

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 컴포넌트를 만들 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)

'TypeScript' 카테고리의 다른 글

React Hook Form: 폼 상태 관리  (0) 2025.02.19
Node-Cache : 서버 성능 최적화  (0) 2025.02.17
React useEffect 의존성 경고  (1) 2025.02.14
Nginx 413 Request Entity Too Large 오류 해결  (0) 2025.02.13
Enum을 넘어서 - const assertions의 장점과 Tree-shaking  (0) 2025.02.12
'TypeScript' 카테고리의 다른 글
  • React Hook Form: 폼 상태 관리
  • Node-Cache : 서버 성능 최적화
  • React useEffect 의존성 경고
  • Nginx 413 Request Entity Too Large 오류 해결
코샵
코샵
나의 코딩 일기장
    반응형
  • 코샵
    끄적끄적 코딩 공방
    코샵
    • 분류 전체보기 (545) N
      • 상품 추천 (54)
      • MongoDB (4)
      • 하드웨어 (9)
      • 일기장 (4)
      • Unity (138)
        • Tip (41)
        • Project (1)
        • Design Pattern (8)
        • Firebase (6)
        • Asset (2)
      • 파이썬 (128)
        • Basic (41)
        • OpenCV (8)
        • Pandas (15)
        • PyQT (3)
        • SBC(Single Board Computer) (1)
        • 크롤링 (14)
        • Fast API (29)
        • Package (6)
      • Linux (4)
      • C# (97)
        • Algorithm (11)
        • Window (7)
      • TypeScript (50) N
        • CSS (10)
      • Git (11)
      • SQL (5)
      • Flutter (10)
        • Tip (1)
      • System (1)
      • BaekJoon (6)
      • Portfolio (2)
      • MacOS (1)
      • 유틸리티 (1)
      • 서비스 (6)
      • 자동화 (3)
      • Hobby (10)
        • 물생활 (10)
        • 식집사 (0)
  • 인기 글

  • 태그

    devlife
    learntocode
    programming101
    rtsp
    파이썬
    쇼핑몰리뷰
    스크립트 실행 순서
    카페24리뷰이관
    리스트
    셀레니움
    codingtips
    믈레코비타멸균우유
    codingcommunity
    ipcamera
    긴유통기한우유
    스마트스토어리뷰
    스크립트 실행
    list
    유니티
    리뷰이관
    상품 리뷰 크롤링
    programmerlife
    카페24리뷰
    라떼우유
    Python
    unity
    cv2
    C#
    appdevelopment
    리뷰관리
  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
코샵
React : map
상단으로

티스토리툴바