문제 상황

필자는 React에서 배열 원소에 같은 스타일을 적용하거나, 나열하고 싶을 때 map() 메서드를 사용한다.
그런데...eslint 에러가 발생할 때가 있다. 아래와 같은 에러가 발생한다.
Array.prototype.map() expects a return value from arrow function.
해결 방법을 알아보자!

원인

에러 문장에 원인이 나와있다. return을 작성해달라는 것이다.
그런데, return을 작성하지 않아도 map()을 사용하는데 문제가 없던 적이 있다.
그 차이를 정확히 알아보자.

map()을 사용하는 두 가지 방법

map() 메서드를 사용하는 방법은 크게 두 가지로 나눌 수 있겠다.
return문을 작성하는 것과, 그렇지 않은 것.

방법 1. return문을 사용할 때

return문을 작성할 때는 중괄호 {}를 사용한다.

arr.map(() => { return value });

예시로 살펴보자.

<div>
  {standings?.map((item, index) => {
    return (
      <div>
        <p>{item.rank}</p>
	    <img src={item.team.logo} alt="team logo" />
        <p>{item.team.name}</p>
        <p>{item.all.payload}</p>
	  </div>
	);
  })}
</div>

방법 2. return문을 사용하지 않을 때

이 때는 일반 괄호 ()를 사용한다.

arr.map(() => value );

or

arr.map(( ) => ( value ));

예시로 살펴보자.

<div>
  {standings?.map((item, index) => (
    <div>
      <p>{item.rank}</p>
	  <img src={item.team.logo} alt="team logo" />
      <p>{item.team.name}</p>
      <p>{item.all.payload}</p>
	</div>
  ))}
</div>

해결

두 방법 모두 전혀 문제 없이 작동한다.
단, 두 방법을 섞어서 써버리면 에러가 발생할 것이다.
보통, 서론에서 언급한 에러가 발생하는 것은 return문을 작성하는 방법1을 따르도록 코드를 작성하면서 무엇인가 빠뜨린 경우일 것이다.(return문을 작성하라고 에러가 말하니까..)

참고 자료

참고 자료