ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • map : html반복문
    React 2022. 3. 7. 12:58

    map 함수는 원래 array내의 데이터에 똑같은 처리를 할 때 사용한다.  예를 들면,

    var array = [2,3,4]
    
    var newArray = array.map(function(a) {
    	return a * 2
    } //보통 새 변수에 담아서 사용

    이렇게 사용해 a에 모두 2씩 곱해 array란 배열을 4,6,8로 만든다.

     

    이런 원리로, map으로 반복문을 쓰는 원리는

    반복할데이터.map( () => { return <HTML> } ) } 또는 반복할데이터.map(function () {return <HTML>})로 쓰면 된다.

    let [글제목,글제목변경] = useState(['남자 코트 추천', '코딩 인강 추천', '데이트 맛집 추천']);
    
    {
            글제목.map(function(a) {
              return (
                <div className="list"> //맥에선 파라미터에 i를 쓰고 여기에 key={i}를 쓰면 warning안남
                  <h3> { a } </h3>
                  <p>2월 19일 발행</p>
                  <hr />
                </div>
              )
            })
    }

    이렇게 사용하며, 글제목이란 state어레이의 데이터 수 3번만큼 반복되며, state의 어레이 대신 [1,2,3]으로 사용해 3번 반복하게 해주세요라고 쓸 수 있다. function(a)의 a는 글제목안의 데이터를 뜻한다. 그래서 {a}로 쓰면 위의 데이터가 나온다. 그리고 두번째 파라미턴 반복문이 돌 때의 수 즉, 0, 1, 2 ~~ 를 뜻하므로, 반복문이 돌때 숫자가 커짐을 이용할 때 사용한다.

    만약, 일반 for반복문을 쓰려면

    function App (){
    
      function 반복된UI(){
        var 어레이 = [];
        for (var i = 0; i < 3; i++) {
          어레이.push(<div>안녕</div>)  //빈 어레이에 push로 3번 반복해 추가한다.
        }
        return 어레이
      }
      
      
      return (
        <div>
          HTML 잔뜩있는 곳
          
          { 반복된UI() }
        </div>
      )
    }

    이런 식으로, 사용하면 return 쪽에 안녕이란 div세개가 추가되어 생성된다.

    댓글

Designed by Tistory.