[React] map함수 + 화살표함수 사용할시 return 생략하는 법 (MAP, ARROW, JSX)

[React] map함수 + 화살표함수 사용할시 return 생략하는 법 (MAP, ARROW, JSX)

 

1. 기본 문법

      //리액트 문법 JSX를 사용해야 함 
      <div>
        <h4 className="title">상품목록</h4>
        {
          prd.map((elm, i)=>{
            return(
              <div className="food" key={i}>
                <img src={`/food${i}.png`} className="food-img"/>
                <h4>{elm.menuName} ${elm.price}</h4>
              </div>
            )
          })
        }
      </div>

 

2.  return 생략하는 문법

- 화살표 함수 안에 중괄호{} 지우고 

- return 지움, 소괄호() 는 남겨둠

	  //Return 생략하는 방법 
      <div>
        <h4 className="title">상품목록</h4>
        {
          prd.map((elm, i)=>	//중괄호 지우고
            (			//return 지움
              <div className="food" key={i}>
                <img src={`/food${i}.png`} className="food-img"/>
                <h4>{elm.menuName} ${elm.price}</h4>
              </div>
            )
          )
        }
      </div>

 

화살표함수는 워낙 생략할 수 있는 방법이 많아서

헷갈린다.. 이게 왜 됨? 하는게 많음 ㅋㅋ