Warning : Array.prototype.map() expects a value to be returned at the end of arrow function.

반응형

혼자 개인프로젝트를 진행하던 중 

items를 array.map을 사용해서 item 개수에 따라 변동적인 div를 만들고 싶었다. 

하지만 위와 같은 워닝이 발생하면서 화면에 div가 하나도 뜨지 않는 현상이 발생했다.

 

처음엔 Error가 아니여서 무시할까 했지만 아무리 봐도 화면에 뜨지 않는 이유는 저 Warning 때문밖에 없어서 

해결했더니 원하는 대로 div가 출력되었다. 

 

먼저 warning이 발생한 나의 코드를 보면 

const [products, setProducts] = useState([{item: 'item1'}, {item: 'item2'}, {item: 'item3'}, {item: 'item4'}]);


<div className="back">
    <div> <NavComponent/> </div>
    <div className="items">
      {
        products.map((product) => {
          <div className="item">
            {product.item}
          </div>
        })
      }
    </div>
</div>

 

이 코드였는데, 문제점은 map메소드 안에서 화살표 함수를 이용해 렌더링을 작성하였기 때문에 return의 작성여부에 따라 뒤에 ()를 쓸 것인지 {}를 쓸 것인지를 구분해 사용하는 것이다.

 

즉, 화살표 함수를 사용해서 작성하는 방법은 ()만 쓰거나, { return } 사용해야 한다 

그래서 수정된 코드는 

 

# 1. array.map(() => { return })

<div className="back">
    <div> <NavComponent/> </div>
    <div className="items">
      {
        products.map((product) => {
          return <div className="item">
            {product.item}
          </div>
        })
      }
    </div>
</div>




# 2. array.map(() => ()) 

<div className="back">
    <div> <NavComponent/> </div>
    <div className="items">
      {
        products.map((product) => (
          <div className="item">
            {product.item}
          </div>
        ))
      }
    </div>
</div>

 

두가지 방법을 사용하면 발생하던 warning은 사라지고 원하는대로 array.map이 잘 작동한다.