[React] 반복문을 이용한 UI 생성

같은 구조를 가진 UI 를 만들려 할 때 두가지 방법을 사용할 수 있다.

1. for 을 이용한 반복문
2. .map() 을 이용한 반복문

두 방법의 공통점은 결국 return 값이 Array 라는 것이다.

위 사항을 유념하고 다음 내용을 살펴보자.

for 을 이용한 반복문

for 을 이용한 반복문은 다음과 같은 특징을 갖고 있다.

​ 📌 array 를 만든 이후 array 에 html (jsx) 태그를 push 한다.

​ 📌 array 를 return 한다.

예제 코드는 다음과 같다.

function App() {
  
  function repeatedUI {
    var arr = [];
    for(var i=0; i<3; i++) {
      arr.push(<div>안녕</div>)
    }    
    return arr;
  }
  
  return(
    { repeatedUI() }
  )
}

.map() 을 이용한 반복문

.map() 에 대하여 잘 모르는 분들은 다음 글에서 관련 내용만 빠르게 살펴보고 오면 좋을 것 같다.

위 글을 읽어보면 .map() 은 결국 새로운 array 를 return 한다는 사실을 알 수 있다.

.map() 을 이용한 반복문은 최종적으로 array 를 return 하게 되고 그 array 안의 모든 요소들이 html (jsx) 로서 렌더링 된다.

예제 코드는 다음과 같다.

import React, {useState} from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  let [title, setTitle] = useState(['나이키', '아디다스', '퓨마']);
  let [thumb, setThumb] = useState([0, 0, 0]);
  return (
    <div>
      {
        title.map(function(e, i) {
          return (
            <div key={i}>
              <h3> { e }
                <span onClick={ () => {
                  var temp = [...thumb];
                  temp[i] = temp[i] + 1;
                  setThumb(temp);
                }}>👍</span> { thumb[i] }
              </h3>
            </div>
          )
        })
      }
    </div> 
  )
}

export default App

한편, .map() 을 이용하여 생성한 html (jsx) 요소에 key={} 속성을 부여하지 않으면 warning 이 나타난다.