[React] map함수를 활용하여 배열의 List를 출력하는 방법

1. map 함수 활용법

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아

새로운 배열을 반환한다.

 

arr.map(callback(currentValue[, index[, array]])[, thisArg])
arr.map( 함수 ( 현재값, 인덱스 ))

 

ex1 ) 

arr.map( (item, index) => {
    retrun 반환값
})

 

ex2 ) 

일급함수 : 함수를 반환값 처리한다.
arr.map( (item, index) => 반환값 )

 

 

2. map함수를 활용하여 배열의 List를 출력하는 방법

 

user라는 배열을 만들어주고 map함수를 이용하여 배열에 있는 값을 하나씩 꺼내준다.

만약 map을 사용하지 않는다면, { user[0].id } 이런식으로 하나씩 꺼내서 사용해야한다.

(불필요하게 코드가 길어지고, 배열의 요소가 많아진다면 꺼내기 어려워질 것이다.)

 

1)

import React, { useState } from 'react';
import '../assets/css/reset.css'
import './Test5.css'

const user = [
    {id: 1 , name: '배수지', age: 22 ,addr: '서울', done: true},
    {id: 2 , name: '박서준', age: 20 ,addr: '제주', done: false},
    {id: 3 , name: '손예진', age: 30 ,addr: '울산', done: true},
    {id: 4 , name: '김선호', age: 35 ,addr: '부산', done: false},
    {id: 5 , name: '최우식', age: 28 ,addr: '경기', done: true},
]

const Test5 = () => {
    const [ data, setData ] = useState(user);

    return (
        <>
            <table className='list'>
                <caption> 출연진 목록 </caption>
                <colgroup>
                    <col className='num' />
                    <col className='name' />
                    <col className='age' />
                    <col className='addr' />
                    <col className='consent' />
                </colgroup>
                <thead>
                    <tr>
                        <th>번호</th>
                        <th>이름</th>
                        <th>나이</th>
                        <th>주소</th>
                        <th>동의여부</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        data.map( item => {
                            return (
                                <tr key={item.id}>
                                    <td>{item.id}</td>
                                    <td>{item.name}</td>
                                    <td>{item.age}</td>
                                    <td>{item.addr}</td>
                                    <td>{item.done ? '동의' : '비동의'}</td>
                                </tr>
                            )
                        })
                    }
                   
                </tbody>
            </table> 
        </>
    );
};

export default Test5;

 

2)

const GalleryList = ({ data, onView }) => {
     return (
         <ul className='list'>
             {
                 data.map( item => <GalleryItem key={item.id} item={item} onView={onView} /> )
             }
         </ul>
     );
};

 

3)

<ul>
   {
      data.map( item => <li>{item.id}/{item.text}</li>)
   }
</ul>

 

-> done은 boolean 형태이고, true false를 반환하지 못한다.

그래서 삼항연산자를 이용하여 값을 반환시켰다.

 

3. key값 주기

key값은 중복이 되지않으며 unique하다.

영문, 숫자 등등 상관없지만 객체의 고유한 id를 사용한다.

 

key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.

key는 엘리먼트의 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트를 지정해야한다.

 

위의 예제에서도 반복되는 element에 key를 넣어 고유성을 부여하였다.