map()

리액트에서 반복문 처리

JSX에서 자바스크립트 사용시 중괄호를 쓰고, 안에다 입력한다.주로 사용했던 조건문인 if문 대신 {} 안에서 삼항 연산자를 사용했듯,반복문을 처리할 때는 for문 대신 map() 을 이용해 반복문을 처리해야 한다.

  array.map()  

 

⭐반복문 사용 시 유용하다!

• array의 자료 개수만큼 함수 안의 코드를 실행해준다.
• 함수의 파라미터는 array 안에 있던 자료이다.
• return 오른쪽에 있는 것 array에 담아준다.

//array.map(콜백함수);

array.map(function() {
	실행할 코드
});

[1,2,3].map(function(a) {
	console.log(a)  // 1,2,3 순서대로 나옴
});

[1,2,3].map(function(a) {
	return '123'  // ['123','123','123']
});

• 리액트에선 return에 html 태그를 넣어도 반복 재생해 배열에 넣어준다.
• 코드가 여러줄일 때는 return () 소괄호 안에다 코드를 넣어준다.

{
      [1,2,3].map(function(){
        return <div>안녕</div>
      })
}

{
      [1,2,3].map(function(){
        return (
          <div>안녕</div>
          <div>안녕</div>
        )
      })
}

 

* 콜백함수

다른 함수의 인자로 전달된 후 함수 내부에서

필요할 때(바로 사용할 수도 나중에 사용할 수도 있음) 콜백함수를 호출해 사용한다.

array.map(function(a,i) {
	실행할 코드
});

//a는 파라미터/매개변수
//i는 반복문 돌 때마다 0부터 1씩 증가하는 정수

//콜백함수와, map함수를 이용하여 jsx 내에서 반복문을 만들 수 있다.

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

 

📍반복문으로 html 생성시 뜨는 에러메세지

→ key={html 마다 다른 숫자} 추가해야 한다.

→ 반복 생성한 UI마다 각각  다른 숫자를 가져야 함

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