[React] JSX에서 반복문 어떻게 씀? : map 쓰셈

React에서 반복문을 사용하고 싶을때는, map을 사용하는게 가장 간단하다.

 

#1. 간단한 사용설명

다음과 같은 형식으로 쓰는데, function의 첫번째 파라미터는 어레의 각각 요소들이 들어간다. 그래서.. 

반복하고싶은어레이.map(function(어레이요소){
  return(
    <p>{어레이요소}</p>
  )
})

- 다음과 같이 각각의 어레이 요소들이 출력된다.

[1,2,3,4,5].map(function(어레이요소){
  return(
    <p>{어레이요소}</p>
  )
}) 
// 1
// 2
// 3
// 4
// 5

 

- 두번쨰 파라미터도 추가할수있는데, 두번째는 0부터 시작하여 1씩 증가하는 정수가 들어간다. 

- 반복문을 사용하는경우, 각 요소에 고유한 key값을 넣어주지 않으면 에러가 나는데, 두번째 파라미터를 사용하면 키도 쉽게 넣을 수 있다. 

[1,2,3,4,5].map(function(어레이요소, 인덱스){
  return(
    <p key={i}>{인덱스}</p>
  )
}) 
// 0
// 1
// 2
// 3
// 4

 

# 적용해보자

- 실제 어레이에 적용해보자!

- array란 이름을 가진 array를 useState에 저장해 두고, 이것의 갯수만큼 도는 반복문을 만든 것이다. 

- 이렇게 만들면.. 

export function App(props) {

  let [array] = useState(['일번','이번','삼번','사번','오번','육번']);

  return (

    <div className='App'>

      {

        array.map(function(item, idx){

          return(

            <p key={idx}>{item}</p>

          )

        })

      }

    </div>

  );

}

 

- 이렇게 예쁜 출력결과가 나온다.

- 혹시 오류가 난다면 키를 제대로 넣었는지, 반환되는 반복문을 return 안에 잘 넣었는지 확인해보자. 

 

- 연습해보기

https://playcode.io/1532998