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 오류 해결
코샵
코샵
나의 코딩 일기장
    반응형
  • 코샵
    끄적끄적 코딩 공방
    코샵
    • 분류 전체보기 (544) N
      • 상품 추천 (54) N
      • MongoDB (4)
      • 하드웨어 (9)
      • 일기장 (4)
      • Unity (138)
        • Tip (41)
        • Project (1)
        • Design Pattern (8)
        • Firebase (6)
        • Asset (2)
      • 파이썬 (128) N
        • Basic (41) N
        • 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 (39) 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)
  • 인기 글

  • 태그

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

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

티스토리툴바