TIL | Warning; arrow function을 사용할 때 return문 작성법

Array.prototype.map() expects a return value from arrow function.

다음과 같은 경고문을 본 적이 있으신가요?

아래 코드에서 화살표 기호(=>) 부분에 eslint 경고가 발생했으며,
props로 받아 온 배열을 배열 내장 함수 map을 통해 자식 컴포넌트로 이루어진 배열로 변환하여 렌더링하기 위한 상황입니다.

const TodoList = ({ todos }) => {
  return (
    <div className="toDoList">
      {todos.map((todo) => {
        <TodoListItem todo={todo} />;
      })}
    </div>
  );
};

export default TodoList;

---

map() 함수는 모든 배열 요소에 대해 함수를 호출한 결과와 함께 배열(매핑된 요소)을 반환합니다.

arrow function(화살표 함수)를 이용해 값을 반환하려면 두 가지 옵션을 사용할 수 있습니다.

( ) => value (또는 ( ) => ( value ))

( ) => { return value }

// 이해를 돕기 위한 예시
const array = [1, 2, 3];
let result;

result = array.map(n => { return n + 2 }); // 명시적
result = array.map(n => (n + 2)); // 암시적

---

이를 토대로 return문을 아래와 같이 작성하면 위의 경고를 해결할 수 있습니다.

해결 방법 1.

const TodoList = ({ todos }) => {
  return (
    <div class="toDoList">
      {todos.map((todo) => {
        return <TodoListItem todo={todo} />;
      })}
    </div>
  );
};

export default TodoList;

해결 방법 2.

const TodoList = ({ todos }) => {
  return (
    <div class="toDoList">
      {todos.map((todo) => (
        <TodoListItem todo={todo} />
      ))}
    </div>
  );
};

export default TodoList;

참고 사이트: https://stackoverflow.com/questions/64518433/how-fix-this-warrning-warning-array-prototype-map-expects-a-return-value-from