React Basic - 12. 리액트 반복문 map

map

리액트 return 부분에 map을 통해서 반복문을 표현할 수 있다.

가령 list에서 5번의 like를 쓴다고 치면

return(
  ....
  <ul>
  	{['사과','바나나','딸기','수박','토마토'].map((v)=>{
		return (
        	<li>{v}</li>
        );
	})}
  </ul>
  )

매개변수 v를 받아서 li 태그 내에서 반복을 돌게 된다.

key

실무에서의 사용은 그렇게 간단하지는 않다. 실제로 반복문을 2차원 배열로 반복한다고 보자.

  <ul>
  	{[
    	['사과','맛있다'],
    	['바나나','텁텁하다'],
    	['딸기', '상큼하다'],
    	['수박', '시원하다'],
    	['토마토', '건강하다']
     
     ].map((v)=>{
		return (
          <li><b>{v[0]}</b> - {v[1]}</li>
        );
	})}
  </ul>

이와 같은 형식으로 2차원 배열은 첫번째 값을 반복할 수도 있을 것이다. 하지만 보통 이보다는 내부에 js객체를 이용하는 방식이 더 직관적이며 많이 사용된다.

  <ul>
  	{[
    	[fruit : '사과', characteristic : '맛있다'],
    	[fruit : '바나나',characteristic : '텁텁하다'],
    	[fruit : '딸기', characteristic : '상큼하다'],
    	[fruit : '수박', characteristic :  '시원하다'],
    	[fruit : '토마토', characteristic : '건강하다']
     
     ].map((v)=>{
		return (
          <li><b>{v.fruit}</b> - {v.characteristic}</li>
        );
	})}
  </ul>

결과

사과 - 달다
딸기 - 상큼하다
배 - 아삭하다
복숭아 - 달콤새콤
포도 - 재밌다

이 때 react의 반복문에서 고유한 값인 key를 적어주어야 한다. 이는 react의 성능과 연관된 것으로 반복문이 직접 출력되는 것은 아니다.

		return (
          <li key={v.fruit + v.characteristic}><b>{v.fruit}</b> - {v.characteristic}</li>

반복문에서 매개변수를 두가지 보내어 index까지 표현할 수도 있다.

  <ul>
  	{[
    	[fruit : '사과', characteristic : '맛있다'],
    	[fruit : '바나나',characteristic : '텁텁하다'],
    	[fruit : '딸기', characteristic : '상큼하다'],
    	[fruit : '수박', characteristic :  '시원하다'],
    	[fruit : '토마토', characteristic : '건강하다']
     
     ].map((v, i)=>{
		return (
          <li key={v.fruit + v.characteristic}><b>{v.fruit}</b> - {v.characteristic} - {i}</li>
        );
	})}
  </ul>

i에 반복문의 인덱스 번호가 출력된다.