반복문은 map을! (중괄호 { } 안 for 역시 인식하지 못해)

1. .map 사용법

데이터.map(function(){ 
    return (
    	<컴포넌트/>
    )
})

2. 활용 예시

import React, { useState } from 'react';
import './App.scss';

function App() {
  let [menuTit, menuTitFunc] = useState(['짜장면', '짬뽕', '울면']);
  return (
    <div className="App">
      {
        menuTit.map( ( menu )=>{
          return (
            <div className="menu">{ menu }</div>
          )
        })
      }
    </div>
  );
}

export default App;

3. 그래도 for문을 사용하고 싶다면 별도로 함수 선언하여 불어올 것.

import React, { useState } from 'react';
import './App.scss';

function App() {
  let [menuTit, menuTitFunc] = useState(['짜장면', '짬뽕', '울면']);
  
  function menuMap(){
    var menu = [];
    for ( var i=0; i<menuTit.length; i++ ){
      menu.push(<div className="menu">{ menuTit[i] }</div>)
    }
    return menu;
  }

  return (
    <div className="App">
      { menuMap() }
    </div>
  );
}

export default App;

4. key={ }

두 코드 모두 콘솔을 확인해보면, 위의 오류가 발생했다고 뜬다. 이는 key 값이 없다는 뜻으로, react는 반복문을 실행 시, 각각 고유의 key값을 요구하기 때문이다. 적어도 그만, 안 적어도 그만이라지만, 맵핑할 때 컴포넌트에 키값을 삽입해주면 해결되니, 파라미터 i를 활용하여 해당 경고를 삭제하자. 

menuTit.map( ( menu, i )=>{
   return (
      <button onClick={ ()=>{ menuNumFunc(i) } } key={i} >{ menu }</button>
   )
})