[리액트] map개념, map활용하기

예제1) 리스트를 map으로 가져오기

이런 기본 형태의 리스트를 map으로 표현해보기 
function App(){
  return (
    <div>
      <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Banana</li>
      </ul>
    </div>
  )


🎀map으로 표현하기
  const arr = ['Apple', 'Pear', 'Banana'];

  //중요> index를 추가하고 index를 키값으로 설정하면 중복 방지되어 경고 사라짐
  //원래는 그냥 data만 넣어도 배열이 잘 나옴. 
  const datalist = arr.map((data, index) => (<li key={index}>{index} {data}</li>))

return (
      <div>
        <ul>
          {datalist}
        </ul>
      </div>
    )    
}

경고문 : map으로 리스트를 가지고 올 시에는 중복되지 않아야한다. 즉, 고유한 키값을 가지고 있어야 한다.

따라서 index를 추가하고 index값에 key값을 붙여줘야한다.

 

예제2)더 복잡한 리스트를 map으로 가져오기

멤버 정보가 담긴 배열을 순회하면서 각 요소들을 tr 태그로 감싸고, 
td 태그로 나누어 멤버의 정보를 출력하는 테이블을 생성하는 JSX 코드

 

function App(){
  const memberrs = [
    { "id":"abc", "name":"홍길동", "height":172.1 },
    { "id":"bcd", "name":"성춘향", "height":157.3 },    //json형태
    { "id":"cde", "name":"일지매", "height":180.1 },
  ];

  const memberlist = memberrs.map((mem, index) => {
    return (
      <tr key={index}>
        <td>{mem.id}</td>
        <td>{mem.name}</td>
        <td>{mem.height}</td>
      </tr>
    );

  });
  return (
    <div> 
      <table border="1">  
      <colgroup>  
        <col width="100"/><col width="200"/><col width="150"/>
      </colgroup>
      <thead>
        <tr>
          <th>id</th>
         <th>name</th>
         <th>height</th>
        </tr>
      </thead>
       <tbody>
        {memberlist}
       </tbody>
      </table>
    </div>
  )
}

이 예제에서도 중복 경고 방지를 위해 index값에 key값을 붙여준다.