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

ylyl·2021년 10월 13일
1

TIL

목록 보기
77/86

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

    profile
    천방지축 빙글빙글

    0개의 댓글