리액트 map 함수, 반복문, for문 대신 사용

map 함수 사용법

map함수는 보통 array자료를 반복할때 사용된다.

리액트에서는 { } 중괄호 안에 사용하는건 for반복문이 아니라 map반복문을 사용해야 한다.

for 문법은 JSX 안에서 사용할 수 없어서 사용시에는 바깥에서 쓰면 된다.

[1,2,3].map((a)=>{
console.log(a)
})

// a라는걸 array에 반복,순차적으로 넣어준다.
// a,a,a

[1,2,3].map((a)=>{
  return '123'
})

// return을 사용하면 123이라는 결과를 [123],[123],[123] 이렇게 넣어준다.
// return안에 넣는 값이 길어지면 ( ) 를사용해서 안에 넣어주면 된다.

 

 

아래는 예시이다. 글제목이라는 array 자료 길이만큼 반복해주는것.

 

let [ 글제목 ] = useState(['코트추천', '바지추천' , '가디건추천'])

{
    글제목.map((a, i)=> {
      return (    
      <div className="list">
        <h4 onClick={()=> { 
          setModal(!modal)}
          }>
            { 글제목[i] }
        </h4>
        <p>2월 17일 발행</p>
      </div>
      )
    })

}

 

그럼 글제목 useState에 담겨있는 글자들이 글제목에 발행되고 i의 정수(인덱싱)가 입력된다.